复制代 代码如下: <頭> 点击切换と自動切换選択项卡 <br> *{リストスタイル:なし;マージン:0;パディング:0;オーバーフロー:非表示} <br> .tab1{幅:401px;border-top:#A8C29F ソリッド 1px;border-bottom:#A8C29F ソリッド 1px;margin:50px 200px;} <br> .menu{幅:400px;背景:#eee;高さ:28px;border-right:#A8C29F 実線 1px;border-bottom:#A8C29F 実線 1px;} <br> li{float:left;width:99px;text-align:center;line-height:28px;height:28px;cursor:pointer;border-left:#A8C29F Solid 1px;color:#666;font-size:14px;オーバーフロー:非表示} <br> .menudiv{幅:399px;高さ:300px;border-left:#A8C29F ソリッド 1px;border-right:#A8C29F ソリッド 1px;border-top:0;background:#fefefe} <br> .menudiv div{パディング:15px;行の高さ:28px;} <br> .off{背景:#E0E2EB;カラー:#336699;フォントの太さ:太字} <br> </スタイル> <br> <スクリプトタイプ="text/javascript"> <br> function setTab(name,cursel){ <br> Cursel_0=カーセル; <br> for(var i=1; i var menu = document.getElementById(name i); <br> var menudiv = document.getElementById("con_" name "_" i); <br> if(i==cursel){ <br> メニュー.クラス名 = "オフ"; <br> menudiv.style.display="ブロック"; <br> }<br> 他{ <br> メニュー.クラス名=""; <br> menudiv.style.display="none"; <br> }<br> }<br> }<br> 関数 Next(){ <br> カーセル_0 ; <br> if (cursel_0>links_len)cursel_0=1 <br> setTab(name_0,cursel_0); <br> }<br> var name_0='1'; <br> varcursel_0=1; <br> var links_len,iIntervalId; <br> onload=function(){ <br> var links = document.getElementById("tab1").getElementsByTagName('li') <br> リンク_len=リンクの長さ; <br> for(var i=0; i<links_len i></links_len> links[i].onmouseover=function(){ <br> クリアインターバル(iIntervalId); <br> }<br> }<br> document.getElementById("con_" name_0 "_" links_len).parentNode.onmouseover=function(){ <br> クリアインターバル(iIntervalId); <br> }<br> setTab(name_0,cursel_0); <br> }<br> </スクリプト> <br> </head> <br> <br> <h3> </h3> <br> <div class="tab1" id="tab1"> <br> <div class="メニュー"> <br> <ul> <br> <li id="one1" onclick="setTab('one',1)">标签1</li> <br> <li id="one2" onclick="setTab('one',2)">标签2</li> <br> <li id="one3" onclick="setTab('one',3)">标签3</li> <br> <li id="one4" onclick="setTab('one',4)">标签4</li> <br> </ul> <br> </div> <br> <div class="menudiv"> <br> <div id="con_one_1"><h4 style="color:red">标签1-内容</h4></div> <br> <div id="con_one_2" style="display:none;"><h4 style="color:red">标签2-内容</h4></div> <br> <div id="con_one_3" style="display:none;"><h4 style="color:red">标签3-内容</h4></div> <br> <div id="con_one_4" style="display:none;"><h4 style="color:red">标签4-内容</h4></div> <br> </div> <br> </div> <br> </ボディ> <br> </ul> </h3> </div>
