この記事では、JSタブの実装方法について説明します。参照のためにそれを共有してください。特定の分析は次のとおりです。
1。アイデア
1。要素を取得します。
2. OnClickまたはOnMouseMoveイベントをループボタン要素に追加します。
3.現在のボタンをクリックすると、強調表示された状態に表示されます。 forループを介して、すべてのボタンスタイルが空に設定されています。すべてのdivの表示をなしに設定します。
4.現在のボタンをクリックしてスタイルを追加し、現在のdivを表示し、表示するように表示します。
2。HTMLコード：
<div id="div1"> <input type="button" value="1"/> <input type="button" value="2"/> <input type="button" value="3"/> <input type="button" value="4"/> <div style="display:block;">11</div> <div>22</div> <div>33</div> <div>44</div></div>
3。CSSパート：
.active {background：＃9cc;}。div2{width：300px; height：200px;ボーダー：1px＃66666ソリッド;ディスプレイ：なし;}4。JSコード：
<script> window.onload = function（）{var odiv = document.getElementbyid（ 'div1'）; // get div var btn = odiv.getelementsbytagname（ 'input'）; btn [i] .index = i // btn [i]は、指定されたボタンのi番目のボタンです。インデックス属性をボタンに追加し、インデックス値をi btn [i] .onclick = function（）//ボタンのi-thクリックイベント{for（i = 0; i <btn.length; i ++）//ボタンのスタイルを削除し、divを非表示にする{btn [i] .classname = ' the div} this.className = 'Active' // Adfict div2 [this.index] .style.display = 'block' // this.indexは現在のdiv}}} </script>この記事がみんなのJavaScriptプログラミングに役立つことを願っています。