js简单实现竖向tab选项卡的方法
本文实例讲述了js简单实现竖向tab选项卡的方法。分享给大家供大家参考。具体如下：
选项卡占据左边，而内容放在右边，一个适合新手的竖向的tab选项卡特效例子
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<htmllang="ru">
<head>
<title>简单js实现tab切换</title>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<styletype="text/css">
*{
margin:0;padding:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.container{
margin:0auto;
width:500px;
overflow:hidden;
background:beige;
}
li{
border-top:1pxsolidlightgrey;
border-left:1pxsolidlightgrey;
border-right:1pxsolidlightgrey;
height:35px;
line-height:35px;
list-style:none;
text-align:center;
width:100px;
}
li:last-child{
height:159px;border-right:1pxsolidlightgrey;
border-bottom:1pxsolidlightgrey;
}
li.active{
border-right:1pxsolidwhite;background:white;
}
li.normal{
border-right:1pxsolidwhite;background:red;
}
#tab_content{
float:right;
width:400px;
*width:394px;
background:white;
height:300px;
overflow:hidden;
border-top:1pxsolidlightgrey;
border-right:1pxsolidlightgrey;
border-bottom:1pxsolidlightgrey;
border-left:0pxsolidlightgrey;
}
#tab_content.content{
padding:15px;
-moz-border-radius:5px;
height:300px;
}
</style>
</head>
<body>
<divclass='container'>
<divid="tab_content">
<divid="a"class="content">
aaaaa
</div>
<divid="b"class="content">
bbbbb
</div>
<divid="c"class="content">
cccccc
</div>
<divid="d"class="content">
DDDDDDDDDDDDDDd
</div>
</div>
<div>
<ulid='tabnav'><li><ahref="#a">A</a></li>
<liclass='active'><ahref="#b">B</a></li>
<li><ahref="#c">C</a></li>
<li><ahref="#d">D</a></li>
<li><ahref="#d"></a></li>
</ul>
</div>
</div>
<scripttype="text/javascript">
functionchangeStyle(){
this.onclick=function(){
varlist=this.parentNode.childNodes;
for(vari=0;i<list.length;i++){
if(1==list[i].nodeType&&'active'==list[i].className){
list[i].className="";
}
}
this.className='active';
}
}
vartabs=document.getElementById('tabnav').childNodes;
for(vari=0;i<tabs.length;i++){
if(1==tabs[i].nodeType){
changeStyle.call(tabs[i]);
}
}
</script>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。