<script type="text/javascript" src="js/jquery.tab.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#tab").tab({
//dft:0, // 起始显示项,默认为第一项
//auto:true, // 自动切换,默认为关闭
//act:"mouseover", // 鼠标划过,默认为单击
//effact:" scrollx", // 横向滚动效果,纵向滚动为 scrolly
//effact:"slow", // "slow" 效果
tabId: ".tags", // 切换控制器
tabTag: "li", // 切换控制器标签
conId: ".panes", // 内容容器
conTag: ".pane" // 内容容器标签
})
})
</script>
?
<div id="tab">
<ul class="tags">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
<div class="panes">
<div class="pane"> 项目一内容 </div>
<div class="pane"> 项目二内容 </div>
<div class="pane"> 项目三内容 </div>
</div>
</div>
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Tab 插件DEMO</title>
<style type="text/css">
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,table,td,th,form,fieldset,img,dl,dt,dd
{
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
}
a {
color: #35679a;
text-decoration: none;
}
a:hover {
color: #c00;
text-decoration: underline;
}
img {
border: none;
}
li {
list-style: none;
}
body {
text-align: left;
background: #505050;
font-size: 12px;
}
.cont {
background: #080808;
padding: 8px;
width: 840px;
margin: 0 auto;
}
.main {
background: #eee;
padding: 6px;
}
h2 {
font-size: 16px;
font-family: "黑体";
color: #35679a;;
padding: 4px 10px;
margin: 10px 0 16px;
font-weight: 100;
border-bottom: 2px solid #ccc;
}
h3 {
padding-left: 50px;
font-size: 16px;
color: #555;
}
.testtab {
border: 4px solid #ccc;
margin: 10px 50px;
}
.tabtag {
line-height: 24px;
height: 24px;
border-bottom: 2px solid #ccc;
}
.tabtag li {
float: left;
width: 24%;
text-align: center;
background: #eee;
}
.tabtag li.cur {
color: #900;
background: #fff;
}
.tabcon {
height: 100px;
overflow: hidden;
}
.tabcon div {
height: 80px;
padding: 10px;
color: #900;
font-size: 14px;
}
.tabcon li {
line-height: 22px;
}
pre {
color: #444;
}
pre strong {
font-weight: 900;
}
</style>
<script type="text/javascript"
src="../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
/* */
$(document).ready(
function() {
function cur(ele, currentClass, tag) {
ele = $(ele) ? $(ele) : ele;
if (!tag) {
ele.addClass(currentClass).siblings().removeClass(
currentClass);
} else {
ele.addClass(currentClass).siblings(tag).removeClass(
currentClass);
}
}
$.fn.tab = function(options) {
var org = {
tabId : "",
tabTag : "",
conId : "",
conTag : "",
curClass : "cur",
act : "click",
dft : 0,
effact : null,
auto : false,
autotime : 3000,
aniSpeed : 500
}
$.extend(org, options);
var t = false;
var k = 0;
var _this = $(this);
var tagwrp = $(org.tabId);
var conwrp = $(org.conId);
var tag = tagwrp.find(org.tabTag);
var con = conwrp.find(org.conTag);
var len = tag.length;
var taght = parseInt(tagwrp.css("height"));
var conwh = conwrp.get(0).offsetWidth;
var conht = conwrp.get(0).offsetHeight;
var curtag = tag.eq(org.dft);
//prepare
cur(curtag, org.curClass);
con.eq(org.dft).show().siblings(org.conTag).hide();
if (org.effact == "scrollx") {
var padding = parseInt(con.css("padding-left"))
+ parseInt(con.css("padding-right"));
_this.css({
"position" : "relative",
"height" : taght + conht + "px",
"overflow" : "hidden"
});
conwrp.css({
"width" : len * conwh + "px",
"height" : conht + "px",
"position" : "absolute",
"top" : taght + "px"
});
con.css({
"float" : "left",
"width" : conwh - padding + "px",
"display" : "block"
});
}
if (org.effact == "scrolly") {
var padding = parseInt(con.css("padding-top"))
+ parseInt(con.css("padding-bottom"));
_this.css({
"position" : "relative",
"height" : taght + conht + "px",
"overflow" : "hidden"
});
tagwrp.css({
"z-index" : 100
})
conwrp.css({
"width" : "100%",
"height" : len * conht + "px",
"position" : "absolute",
"z-index" : 99
})
con.css({
"height" : conht - padding + "px",
"float" : "none",
"display" : "block"
});
}
tag.css({
"cursor" : "pointer"
}).each(
function(i) {
tag.eq(i).bind(
org.act,
function() {
cur(this, org.curClass);
k = i;
switch (org.effact) {
case "slow":
con.eq(i).show("slow")
.siblings(org.conTag)
.hide("slow");
break;
case "fast":
con.eq(i).show("fast")
.siblings(org.conTag)
.hide("fast");
break;
case "scrollx":
conwrp.animate({
left : -i * conwh + "px"
}, org.aniSpeed);
break;
case "scrolly":
conwrp.animate({
top : -i * conht + taght
+ "px"
}, org.aniSpeed);
break;
default:
con.eq(i).show().siblings(
org.conTag).hide();
break;
//End of switch
}
})
})
if (org.auto) {
var drive = function() {
if (org.act == "mouseover") {
tag.eq(k).mouseover();
} else if (org.act == "click") {
tag.eq(k).click();
}
k++;
if (k == len)
k = 0;
}
t = setInterval(drive, org.autotime);
}
//End of $.fn.tab
}
//Drive
$("#testtab").tab({
tabId : "#tabtag",
tabTag : "li",
conId : "#tabcon",
conTag : "div",
act : "click",
effact : "scrolly",
dft : 0
})
$("#testtab2").tab({
tabId : "#tabtag2",
tabTag : "li",
conId : "#tabcon2",
conTag : "div",
act : "click",
effact : "scrollx",
dft : 2
})
$("#testtab3").tab({
tabId : "#tabtag3",
tabTag : "li",
conId : "#tabcon3",
conTag : "div",
auto : true,
act : "mouseover"
})
$("#testtab4").tab({
tabId : "#tabtag4",
tabTag : "li",
conId : "#tabcon4",
conTag : "div",
effact : "slow",
act : "mouseover"
})
})
/* */
</script>
</head>
<body>
<div class="cont">
<div class="main">
<h2>
切换
</h2>
<h3>
垂直滚动 点击触发
</h3>
<div class="testtab" id="testtab">
<div id="tabtag" class="tabtag" style="position: relative;">
<ul>
<li class="cur">
项目一
</li>
<li>
项目二
</li>
<li>
项目三
</li>
<li>
项目四
</li>
</ul>
</div>
<div id="tabcon" class="tabcon">
<div>
<ul>
<li>
<a href="#nogo">日之泉杯：寿战两球张晓彬世界波 金德4:2逆转胜绿城</a>
</li>
<li>
<a href="#nogo">投入超过国字号总和：09足协青少年足球预算500万</a>
</li>
<li>
<a href="#nogo">09中超期待十大焦点战：鲁沪巅峰PK江浙德比劲爆</a>
</li>
<li>
<a href="#nogo">泰达上下不惧魔鬼赛程 队员：早晚要打不如一锅端</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="#nogo">日之泉杯：寿战两球张晓彬世界波 金德4:2逆转胜绿城</a><span>03/06</span>
</li>
<li>
<a href="#nogo">投入超过国字号总和：09足协青少年足球预算500万</a><span>03/06</span>
</li>
<li>
<a href="#nogo">09中超期待十大焦点战：鲁沪巅峰PK江浙德比劲爆</a><span>03/06</span>
</li>
<li>
<a href="#nogo">泰达上下不惧魔鬼赛程 队员：早晚要打不如一锅端</a><span>03/06</span>>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="#nogo">日本影星集合可爱清纯于一身</a>
</li>
<li>
<a href="#nogo">中超联赛世界排名不敌新加坡</a>
</li>
<li>
<a href="#nogo">中超联赛世界排名不敌新加坡</a>
</li>
<li>
<a href="#nogo">中超联赛世界排名不敌新加坡</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="#nogo">日之泉杯：寿战两球张晓彬世界波 金德4:2逆转胜绿城</a><span>03/06</span>
</li>
<li>
<a href="#nogo">投入超过国字号总和：09足协青少年足球预算500万</a><span>03/06</span>
</li>
<li>
<a href="#nogo">09中超期待十大焦点战：鲁沪巅峰PK江浙德比劲爆</a><span>03/06</span>
</li>
<li>
<a href="#nogo">泰达上下不惧魔鬼赛程 队员：早晚要打不如一锅端</a><span>03/06</span>>
</li>
</ul>
</div>
</div>
</div>
<pre>
$("#testtab").tab({
tabId:"#tabtag", //切换控制器的ID
tabTag:"li", //切换控制器标签
conId:"#tabcon", //内容容器ID
conTag:"div", //容器标签
act:"click", //点击触发 也可以不设置 默认就为click 设置为 mouseover则为划过
effact: "scrolly" //效果为纵向滚动
})
</pre>
<h3>
水平滚动 点击触发 设置起始显示序列
</h3>
<div class="testtab" id="testtab2">
<div id="tabtag2" class="tabtag" style="position: relative;">
<ul>
<li class="cur">
项目一
</li>
<li>
项目二
</li>
<li>
项目三
</li>
<li>
项目四
</li>
</ul>
</div>
<div id="tabcon2" class="tabcon">
<div>
<ul>
<li>
<a href="#nogo">日之泉杯：寿战两球张晓彬世界波 金德4:2逆转胜绿城</a>
</li>
<li>
<a href="#nogo">投入超过国字号总和：09足协青少年足球预算500万</a>
</li>
<li>
<a href="#nogo">09中超期待十大焦点战：鲁沪巅峰PK江浙德比劲爆</a>
</li>
<li>
<a href="#nogo">泰达上下不惧魔鬼赛程 队员：早晚要打不如一锅端</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="#nogo">日之泉杯：寿战两球张晓彬世界波 金德4:2逆转胜绿城</a><span>03/06</span>
</li>
<li>
<a href="#nogo">投入超过国字号总和：09足协青少年足球预算500万</a><span>03/06</span>
</li>
<li>
<a href="#nogo">09中超期待十大焦点战：鲁沪巅峰PK江浙德比劲爆</a><span>03/06</span>
</li>
<li>
<a href="#nogo">泰达上下不惧魔鬼赛程 队员：早晚要打不如一锅端</a><span>03/06</span>>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="#nogo">日本影星集合可爱清纯于一身</a>
</li>
<li>
<a href="#nogo">中超联赛世界排名不敌新加坡</a>
</li>
<li>
<a href="#nogo">中超联赛世界排名不敌新加坡</a>
</li>
<li>
<a href="#nogo">中超联赛世界排名不敌新加坡</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="#nogo">日之泉杯：寿战两球张晓彬世界波 金德4:2逆转胜绿城</a><span>03/06</span>
</li>
<li>
<a href="#nogo">投入超过国字号总和：09足协青少年足球预算500万</a><span>03/06</span>
</li>
<li>
<a href="#nogo">09中超期待十大焦点战：鲁沪巅峰PK江浙德比劲爆</a><span>03/06</span>
</li>
<li>
<a href="#nogo">泰达上下不惧魔鬼赛程 队员：早晚要打不如一锅端</a><span>03/06</span>>
</li>
</ul>
</div>
</div>
</div>
<pre>
$("#testtab2").tab({
tabId:"#tabtag2", //切换控制器的ID
tabTag:"li", //切换控制器标签
conId:"#tabcon2", //内容容器ID
conTag:"div", //容器标签
act:"click", //点击触发 也可以不设置 默认就为click 设置为 mouseover则为划过
effact: "scrollx", //横向滚动效果
<strong>dft:2</strong> //设置起始显示序列
})
</pre>
<h3>
无效果 自动切换
</h3>
<div class="testtab" id="testtab3">
<div id="tabtag3" class="tabtag" style="position: relative;">
<ul>
<li class="cur">
项目一
</li>
<li>
项目二
</li>
<li>
项目三
</li>
<li>
项目四
</li>
</ul>
</div>
<div id="tabcon3" class="tabcon">
<div>
<ul>
<li>
<a href="#nogo">日之泉杯：寿战两球张晓彬世界波 金德4:2逆转胜绿城</a>
</li>
<li>
<a href="#nogo">投入超过国字号总和：09足协青少年足球预算500万</a>
</li>
<li>
<a href="#nogo">09中超期待十大焦点战：鲁沪巅峰PK江浙德比劲爆</a>
</li>
<li>
<a href="#nogo">泰达上下不惧魔鬼赛程 队员：早晚要打不如一锅端</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="#nogo">日之泉杯：寿战两球张晓彬世界波 金德4:2逆转胜绿城</a><span>03/06</span>
</li>
<li>
<a href="#nogo">投入超过国字号总和：09足协青少年足球预算500万</a><span>03/06</span>
</li>
<li>
<a href="#nogo">09中超期待十大焦点战：鲁沪巅峰PK江浙德比劲爆</a><span>03/06</span>
</li>
<li>
<a href="#nogo">泰达上下不惧魔鬼赛程 队员：早晚要打不如一锅端</a><span>03/06</span>>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="#nogo">日本影星集合可爱清纯于一身</a>
</li>
<li>
<a href="#nogo">中超联赛世界排名不敌新加坡</a>
</li>
<li>
<a href="#nogo">中超联赛世界排名不敌新加坡</a>
</li>
<li>
<a href="#nogo">中超联赛世界排名不敌新加坡</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="#nogo">日之泉杯：寿战两球张晓彬世界波 金德4:2逆转胜绿城</a><span>03/06</span>
</li>
<li>
<a href="#nogo">投入超过国字号总和：09足协青少年足球预算500万</a><span>03/06</span>
</li>
<li>
<a href="#nogo">09中超期待十大焦点战：鲁沪巅峰PK江浙德比劲爆</a><span>03/06</span>
</li>
<li>
<a href="#nogo">泰达上下不惧魔鬼赛程 队员：早晚要打不如一锅端</a><span>03/06</span>>
</li>
</ul>
</div>
</div>
</div>
<pre>
$("#testtab3").tab({
tabId:"#tabtag3",
tabTag:"li",
conId:"#tabcon3",
conTag:"div",
<strong>auto:true,</strong>
act:"mouseover"
})
</pre>
<h3>
"slow"效果
</h3>
<div class="testtab" id="testtab4">
<div id="tabtag4" class="tabtag" style="position: relative;">
<ul>
<li class="cur">
项目一
</li>
<li>
项目二
</li>
<li>
项目三
</li>
<li>
项目四
</li>
</ul>
</div>
<div id="tabcon4" class="tabcon">
<div>
<ul>
<li>
<a href="#nogo">日之泉杯：寿战两球张晓彬世界波 金德4:2逆转胜绿城</a>
</li>
<li>
<a href="#nogo">投入超过国字号总和：09足协青少年足球预算500万</a>
</li>
<li>
<a href="#nogo">09中超期待十大焦点战：鲁沪巅峰PK江浙德比劲爆</a>
</li>
<li>
<a href="#nogo">泰达上下不惧魔鬼赛程 队员：早晚要打不如一锅端</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="#nogo">日之泉杯：寿战两球张晓彬世界波 金德4:2逆转胜绿城</a><span>03/06</span>
</li>
<li>
<a href="#nogo">投入超过国字号总和：09足协青少年足球预算500万</a><span>03/06</span>
</li>
<li>
<a href="#nogo">09中超期待十大焦点战：鲁沪巅峰PK江浙德比劲爆</a><span>03/06</span>
</li>
<li>
<a href="#nogo">泰达上下不惧魔鬼赛程 队员：早晚要打不如一锅端</a><span>03/06</span>>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="#nogo">日本影星集合可爱清纯于一身</a>
</li>
<li>
<a href="#nogo">中超联赛世界排名不敌新加坡</a>
</li>
<li>
<a href="#nogo">中超联赛世界排名不敌新加坡</a>
</li>
<li>
<a href="#nogo">中超联赛世界排名不敌新加坡</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="#nogo">日之泉杯：寿战两球张晓彬世界波 金德4:2逆转胜绿城</a><span>03/06</span>
</li>
<li>
<a href="#nogo">投入超过国字号总和：09足协青少年足球预算500万</a><span>03/06</span>
</li>
<li>
<a href="#nogo">09中超期待十大焦点战：鲁沪巅峰PK江浙德比劲爆</a><span>03/06</span>
</li>
<li>
<a href="#nogo">泰达上下不惧魔鬼赛程 队员：早晚要打不如一锅端</a><span>03/06</span>>
</li>
</ul>
</div>
</div>
</div>
<pre>
$("#testtab4").tab({
tabId:"#tabtag4",
tabTag:"li",
conId:"#tabcon4",
conTag:"div",
<strong>effact: "slow"</strong>
})
</pre>
</div>
</div>
</body>
</html>
?