html和css做纵向选项卡,竖排的选项卡

竖排的选项卡_【中国网页开发网】

body{font-size:14px;font-family:"Lucida Grande",Verdana,Lucida,Arial,Helvetica,宋体,sans-serif;}

a:link,a:visited,a:hover,a:active{text-decoration:none;color:#256bae;}

.main{border:4px solid #256bae;width:336px;height:260px;padding-left:5px;overflow:hidden;float:left;}

.nav{position:absolute;z-index:100;margin:15px 0 0 345px;width:24px;}

.nav ul{list-style:none;padding:0;margin:0;}

.nav ul li{border:4px solid #256bae;width:20px;margin:5px auto;text-align:center;cursor:pointer;}

.nav ul li.on{border-left:4px solid #fff;}

.dis{display:block;}

.undis{display:none;}

function g(o){return document.getElementById(o);}

function HoverLi(m,n,counter){for(var i=1;i<=counter;i++){g('tb_'+m+i).className='';g('tbc_'+m+i).className='undis';}g('tbc_'+m+n).className='dis';g('tb_'+m+n).className='on';}

竖排的选项卡,菜单,tag，兼容IE6/IE7/FF。

• 选项一
• 选项二
• 选项三

aaaaaaaaaaaaaaaaa

bbbbbbbbbbbbbbbb

cccccccccccccccccccccc