左側豎向選項卡TAB

2024-09-05 12:19:20

字體：大中小

來源：轉載

供稿：網友

豎向TAB，左側，你一個菜單一樣，點擊左側任一選項，右側區域的內容會隨著變化，用到首頁挺不錯的，希望大家喜歡。

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=gb2312" /><title>左側豎向選項卡TAB</title></head><style type="text/css"></style><div style="width:600px"> <div   id="iwvjtn8m0"   class="lfloat" style="width:126px"> <ul id="nav"> <li id="iwvjtn8m0"    class="aa" id="tb_1" onClick="x:hoverli(1);">ASP版</li> <li id="iwvjtn8m0"    class="bb" id="tb_2" onClick="i:hoverli(2);">PHP版</li> <li id="iwvjtn8m0"    class="aa" id="tb_3" onClick="x:hoverli(3);">CGI版</li> <li id="iwvjtn8m0"    class="aa" id="tb_4" onClick="x:hoverli(4);">JSP版</li> <li id="iwvjtn8m0"    class="aa" id="tb_5" onClick="x:hoverli(5);">VBASIC版</li> <li id="iwvjtn8m0"    class="aa" id="tb_6" onClick="x:hoverli(6);">VC++版</li> <li id="iwvjtn8m0"    class="aa" id="tb_7" onClick="x:hoverli(7);">C#.NET版</li> <li id="iwvjtn8m0"    class="aa" id="tb_8" onClick="x:hoverli(8);">ASP.NET版</li> <li id="iwvjtn8m0"    class="aa" id="tb_9" onClick="x:hoverli(9);">AJAX版</li> <li id="iwvjtn8m0"    class="aa" id="tb_10" onClick="x:hoverli(10);">EXTJS版</li> <li id="iwvjtn8m0"    class="aa" id="tb_11" onClick="x:hoverli(11);">JQUERY版</li> </ul> </div> <div   id="iwvjtn8m0"   class="lfloat" style="width:450px;">  <div   class="iwvjtn8m0"   id="newinfo">     <div   id="iwvjtn8m0"   class="ctt list2">    <div   id="iwvjtn8m0"   class="dis" id="tbc_01">     ASP版    </div>    <div   id="iwvjtn8m0"   class="undis" id="tbc_02">     PHP版    </div>    <div   id="iwvjtn8m0"   class="undis" id="tbc_03">     CGI版    </div>    <div   id="iwvjtn8m0"   class="undis" id="tbc_04">     JSP版    </div>    <div   id="iwvjtn8m0"   class="undis" id="tbc_05">     VBASIC版    </div>    <div   id="iwvjtn8m0"   class="undis" id="tbc_06">     VC++版    </div>    <div   id="iwvjtn8m0"   class="undis" id="tbc_07">     C#.NET版    </div>    <div   id="iwvjtn8m0"   class="undis" id="tbc_08">     ASP.NET版    </div>    <div   id="iwvjtn8m0"   class="undis" id="tbc_09">     AJAX版    </div>    <div   id="iwvjtn8m0"   class="undis" id="tbc_010">     EXTJS版    </div>    <div   id="iwvjtn8m0"   class="undis" id="tbc_011">     JQUERY版    </div>   </div>    </div> </div></div></div><script type="text/javascript" language="javascript">//<!cdata[function g(o){return document.getElementById(o);}function hoverli(n){for(var i=1;i<=11;i++){g('tb_'+i).className='aa';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='list2';g('tb_'+n).className='bb';}function fun(){hoverli(3);}function hoverli2(n){for(var i=1;i<=11;i++){g('js_'+i).className='aa';g('jsc_0'+i).className='undis';}g('jsc_0'+n).className='list2';g('js_'+n).className='bb';}function fun2(){hoverli2(3);}function hoverli3(n){for(var i=1;i<=11;i++){g('be_'+i).className='aa';g('bec_0'+i).className='undis';}g('bec_0'+n).className='list2';g('be_'+n).className='bb';}function fun3(){hoverli2(3);}//如果要做成點擊后再轉到請將<li>中的onmouseover 改成 onclick;</script><body></body></html>

上一篇：一個CSS個性菜單

下一篇：CSS頂部隱藏菜單