js简单实现竖向tab选项卡的方法

本文实例讲述了js简单实现竖向tab选项卡的方法。分享给大家供大家参考。具体如下：

选项卡占据左边，而内容放在右边，一个适合新手的竖向的tab选项卡特效例子

*{
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;
}
li.active {
border-right:1px solid white;background:white;
}
li.normal {
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;
}




 
 
aaaaa
 
 
bbbbb
 
 
cccccc
 
 
DDDDDDDDDDDDDDd
 
 

A
B
C
D



 

希望本文所述对大家的javascript程序设计有所帮助。