Question

JS+CSS的tab选项卡

哪位可以提供下...三个选项卡的

Answer 1

<!--html-->
<div class="c2leftt1">
<div class="nTab4">
<!-- 标题开始 -->
<div class="TabTitle4">
<ul id="myTab44">
<li class="active" onclick="nTabs(this,0);">陈志明</li>
<li class="normal" onclick="nTabs(this,1);">陈二明</li>
<li class="normal" onclick="nTabs(this,2);">志明</li> </ul>
</div>
<!-- 内容开始 -->
<div class="TabContent4">
<!--1 -->
<div id="myTab44_Content0">
aaaaaaa
aaaaaaaaaaaaaa
</div>
<!--1ned -->
<div id="myTab44_Content1" class="none"> 111 </div>
<div id="myTab44_Content2" class="none"> 222 </div>
</div>
</div>
</div>
<!--html-->
html 结束

/*JS*/
// JavaScript Document
function nTabs(thisObj,Num){
if(thisObj.className == "active")return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
if (i == Num)
{
thisObj.className = "active";
document.getElementById(tabObj+"_Content"+i).style.display = "block";
}else{
tabList[i].className = "normal";
document.getElementById(tabObj+"_Content"+i).style.display = "none";
}
}
}
/*JS结束*/

/*css*/

.nTab4{
float: left;
width: 266px;
height:200px;
margin: 0 auto;
background-position:left;
background-repeat:repeat-y;
text-align:left;
}
.nTab4 .TabTitle4{
clear: both;
height: 22px;
overflow: hidden;
background-image:url(../images/home.jpg); background-position:-296px -256px;
text-align:left;
padding-left:24px !important; padding-left:20px;
}
.nTab4 .TabTitle4 ul{
border:0;
padding:0;
margin:0;
}
.nTab4 .TabTitle4 li{
float: left;
width: 54px;
cursor: pointer;
padding-top: 4px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 2px;
list-style-type: none;
font-size: 12px;
text-align: center;
height:14px;
}
.nTab4 .TabTitle4 .active{background:#fff;border-left:1px #A2BBD9 solid;border-top:1px #A2BBD9 solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}
.nTab4 .TabTitle4 .normal{border:1px #A2BBD9 solid; background-image:url(../images/hm22bj.gif); background-repeat:repeat-x;}
.nTab4 .TabContent4{
width:auto;background:#fff;
margin: 0px auto;
padding:5px 0 0 0;
height:170px;
}
.none {display:none;}
.niuren{ width:264px; height:100px;}
.niurenpic{ width:80px; height:100px; float:left;}
.niurenasp{ width:170px; height:90px; float:right; padding-top:10px;}
.niurenasp b{ border:0; margin:0; padding:0;}
.niurenasp p{ border:0; margin:0; color:#666666; padding-top:5px; line-height:20px;}
.niurend{ width:264px; height:60px; margin-top:5px;}
.niurend ul{ margin:0; padding:0;}
.niurend li{ height:20px; margin:0; padding:0;}
/*css结束*/

css有点费码如果你要添加选项卡的话自己找找规律， 不知道是不是这东西