实现功能:(选项卡)选项卡前后有一个向前、向后的点击功能,点左边的向前移一个,点右边的向后移一个。
<!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>Demo</title>
<style>
body {background:#f3f3f4;}
body{margin:0;padding:0;font-size:12px;line-height:20px;color:#4f4f4f;font-family:"Verdana","宋体";}
h1,h2,h3,h4,h5,h6,form,div,ul,ol,dl,dt,dd,p,i,li,big,small,em,i,input,select,textarea,td,th{margin:0;padding:0;}
div {margin:0 auto;}
a,img{border:none;}
img {vertical-align:middle;}
em,i {font-style:normal;}
ul,ol {list-style:none;}
#warpper {border:#dfdfdf 1px solid;padding:10px;width:928px;margin:10px auto;background:#fff;}
/*title_tab ul宽880px,10个li,平均76+12=88*/
.title_tab {border-bottom:#dedede 1px solid;margin:0 -10px 5px;height:30px;}
.title_tab span {width:22px;height:22px;display:inline-block;background-repeat:no-repeat;cursor:pointer;}
.title_tab .prev {background-position:0 -959px;float:left;margin:3px 3px 0 8px}
.title_tab .next {background-position:0 -981px;float:right;margin:3px 8px 0 0}
.title_tab ul {font-family:"微软雅黑","黑体","Arial";color:#2E4D7C;float:left;width:880px;height:30px;}
.title_tab ul li {float:left;position:relative;top:1px;background:#f3f3f4;border:#dedede 1px solid;width:74px;text-align:center;line-height:28px;margin:0 6px;cursor:pointer;}
.title_tab ul li.current {background:#fff;border-bottom:#fff 1px solid;border-left:#dedede 1px solid;border-right:#dedede 1px solid;border-top:#dedede 1px solid;}
.tab_content {display:none;}
.tab_content.current {display:block;}
</style>
</head>
<body>
<div id="warpper">
<div id="tab_candidates">
<div class="title_tab" id="title_tab">
<span class="prev" onclick="tabPrev()">左</span>
<ul class="clearfix">
<li onclick="tab('candidates',0)" class="current">名字一</li>
<li onclick="tab('candidates',1)">名字二</li>
<li onclick="tab('candidates',2)">名字三</li>
<li onclick="tab('candidates',3)">名字四</li>
<li onclick="tab('candidates',4)">名字五</li>
<li onclick="tab('candidates',5)">名字六</li>
<li onclick="tab('candidates',6)">名字七</li>
<li onclick="tab('candidates',7)">名字八</li>
<li onclick="tab('candidates',8)">名字九</li>
<li onclick="tab('candidates',9)">名字十</li>
</ul>
<span class="next" onclick="tabNext()">右</span>
</div>
<div id="candidates_0" class="tab_content current" style="height:400px;">111111111</div>
<div id="candidates_1" class="tab_content" style="height:400px;">222222222</div>
<div id="candidates_2" class="tab_content" style="height:400px;">333333333</div>
<div id="candidates_3" class="tab_content" style="height:400px;">4444444444</div>
<div id="candidates_4" class="tab_content" style="height:400px;">555555555</div>
<div id="candidates_5" class="tab_content" style="height:400px;">66666666</div>
<div id="candidates_6" class="tab_content" style="height:400px;">7777777777</div>
<div id="candidates_7" class="tab_content" style="height:400px;">888888888</div>
<div id="candidates_8" class="tab_content" style="height:400px;">999999999</div>
<div id="candidates_9" class="tab_content" style="height:400px;">101010101010</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript">
var otabLis=document.getElementById("title_tab").getElementsByTagName("li");
var index = 0;
function tab(obj,id){
var m=$("#tab_"+obj+" li");
m.removeClass("current");
m.eq(id).addClass("current");
var c=$("#tab_"+obj+" .tab_content");
c.removeClass("current");
c.eq(id).addClass("current");
for(var i=0;i<otabLis.length;i++){
if(otabLis[i].className=="current"){
index = i;
}
}
}
function tabNext(){
index++;
if(index>=otabLis.length){
index=0;
}
for(var i=0;i<otabLis.length;i++){
otabLis.item(i).className="";
otabLis.item(index).className="current";
tab('candidates',index);
}
}
function tabPrev(){
index --;
if(index<0){
index=otabLis.length-1;
}
alert(index);
for(var i=0;i<otabLis.length;i++){
otabLis.item(i).className="";
otabLis.item(index).className="current";
tab('candidates',index);
}
}
</script>