JavaScript を使用して簡単なタブ切り替えを実装する_JavaScript のヒント-jsチュートリアル-php.cn

コードは非常に簡潔で理解しやすいため、無意味な部分はあまりありません。

コードを直接教えてください:

コードをコピーします コードは次のとおりです: *{ font-size: 14px;margin: 0px;} a{color:#a0b3d6;text-decoration: none;} .tabs{border:1px Solid #a0b3d6;margin:100px;width:350px;} .tabs-nav a{background:#eaf0fd; line-height:30px;padding:0px 20px 0px 20px;display:inline-block;border-right:1px ソリッド #a0b3d6;border-bottom:1px ソリッド #a0b3d6;左;} .tabs-nav .on{background:white; border-bottom:1px ソリッドホワイト;} .tabs-content{表示: ブロック; パディング:20px;ボーダートップ:1px ソリッド #a0b3d6;} .tabs-content_hide{表示: なし;}

＆lt; a href = "javascript :;" on "＆gt; lt;/a＆gt; ＆lt; a href = "javascript：;"＆gt; Technology＆lt;/a＆gt; ＆lt; a href = "javascript：;"＆gt; life＆lt;/a＆gt; ＆lt; a href = "javascript：;"＆gt; works＆lt;/a＆gt; ホームページ

テクノロジー

人生

作品

------demo.js---------------

コードをコピー

コードは次のとおりです: window.onload=function(){ tabs("タブ","マウスオーバー"); } 関数タブ(id,トリガー){ var tabBtn = document.getElementById(id).getElementsByTagName("h2")[0].getElementsByTagName("a"); var tabsContent = document.getElementById(id).getElementsByTagName("p"); for(var i=0;i tabBtn[i].index = i; if(トリガー=='マウスオーバー'){ tabBtn[i].onmouseover=function(){ clearClass(); this.className="on"; showContent(this.index); } } 関数 showContent(n){ for (var i=0; i tabsContent[i].index = i; tabsContent[i].className = "tabs-content_hide"; } tabsContent[n].className="タブコンテンツ"; } 関数clearClass(){ for(var i=0;i tabBtn[i].className=""; } } } } は、選択されたピースの切り替え効果を実現するための非常に単純なものではなく、小さな付属品を自分自身で美化し、自分のリスト内で使用できます。