选项卡切换代码.doc
文本预览下载声明
求助选项卡切换代码
2010-1-28 20:08
提问者： c346819739 | 浏览次数：2235次
style type=text/css
.nTab{
float: left;
width: 100%;
margin: 0 auto;
border-bottom:1px #AACCEE solid;
background:#d5d5d5;
background-position:left;
background-repeat:repeat-y;
margin-bottom:2px;
}
.nTab .TabTitle{
clear: both;
height: 22px;
overflow: hidden;
}
.nTab .TabTitle ul{
border:0;
margin:0;
padding:0;
}
.nTab .TabTitle li{
float: left;
width: 70px;
cursor: pointer;
padding-top: 4px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 2px;
list-style-type: none;
font-size: 12px;
text-align: center;
margin: 0;
}
.nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}
.nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;}
.nTab .TabContent{
width:auto;background:#fff;
margin: 0px auto;
padding:10px 0 0 0;
border-right:1px #AACCEE solid;border-left:1px #AACCEE solid;
}
.none {display:none;}
/style
script type=text/javascript
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;
}
}
}
/script
div align=center style=padding-left:25px;
!-- 选项卡1开始 --
div class=nTab style=width:288px
!-- 标题开始 --
div class=TabTitle
ul id=myTab1
li class=active onclick=nTabs(this,0);aaa/li
li class=normal onclick=nTabs(this,1);bbb/li
li class=normal onclick=nTabs(this,2);ccc/li
li class=normal onclick=nTabs(this,3);单击/li
/ul
/div
!-- 内容开始 --
div class=TabContent
div id=myTab1_Content0 000 /div
div id=myTab1_Content1 class=none 111 /div
div id=myTab
显示全部