竖排的选项卡 兼容IE6/IE7/FF

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;}

Js部分 -----------------------------------------------------------------------------

<script type="text/javascript">
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';}
</script>

 

Div部分 -----------------------------------------------------------------------------

<h1>竖排的选项卡 兼容IE6/IE7/FF。</h1>
<div class="cwdn">
    <div class="nav">
        <ul>
            <li class="on" id="tb_11" onclick="HoverLi(1,1,3);">选项一</li>
            <li class="" id="tb_12" onclick="HoverLi(1,2,3);">选项二</li>
            <li class="" id="tb_13" onclick="HoverLi(1,3,3);">选项三</li>
        </ul>
    </div>
    <div class="dis" id="tbc_11">
        <div class="main">

        </div>
    </div>
    <div class="undis" id="tbc_12">
        <div class="main">

        </div>
    </div>
    <div class="undis" id="tbc_13">
        <div class="main">
            
        </div>
    </div>
</div>
<div style="display:none">

</div>