This article describes the method of simply implementing vertical tab tabs by JS. Share it for your reference. The details are as follows:
Tabs occupy the left and the content is placed on the right, a vertical tab tab effect example for beginners
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http:///TR/html4/">
<html lang="ru">
<head>
<title>SimplejsaccomplishtabSwitch</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">
*{
margin:0;padding:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container{
margin:0 auto;
width:500px;
overflow:hidden;
background:beige;
}
li{
border-top:1px solid lightgrey;
border-left:1px solid lightgrey;
border-right:1px solid lightgrey;
height:35px;
line-height:35px;
list-style:none;
text-align:center;
width:100px;
}
li:last-child{
height:159px;border-right:1px solid lightgrey;
border-bottom:1px solid lightgrey;
}
{
border-right:1px solid white;background:white;
}
{
border-right:1px solid white;background:red;
}
#tab_content{
float:right;
width:400px;
*width:394px;
background:white;
height:300px;
overflow:hidden;
border-top:1px solid lightgrey;
border-right:1px solid lightgrey;
border-bottom:1px solid lightgrey;
border-left:0px solid lightgrey;
}
#tab_content .content{
padding: 15px;
-moz-border-radius: 5px;
height:300px;
}
</style>
</head>
<body>
<div class='container' >
<div >
<div class="content">
aaaaa
</div>
<div class="content">
bbbbb
</div>
<div class="content">
cccccc
</div>
<div class="content">
DDDDDDDDDDDDDDd
</div>
</div>
<div >
<ul id='tabnav'><li ><a href="#a" >A</a></li>
<li class='active'><a href="#b" >B</a></li>
<li><a href="#c" >C</a></li>
<li><a href="#d" >D</a></li>
<li ><a href="#d" ></a></li>
</ul>
</div>
</div>
<script type="text/javascript">
function changeStyle(){
=function(){
var list=;
for(var i=0;i<;i++){
if(1==list[i].nodeType && 'active'==list[i].className){
list[i].className="";
}
}
='active';
}
}
var tabs=('tabnav').childNodes;
for(var i=0;i<;i++){
if(1==tabs[i].nodeType){
(tabs[i]);
}
}
</script>
</body>
</html>
I hope this article will be helpful to everyone's JavaScript programming.