この記事では、参照のためにネイティブJSにタブタブの切り替え効果を実装するコードを共有しています。特定のコンテンツは次のとおりです
1.HTMLパーツ
<body> <div id = "tab"> <div> <ul> <li> <a href = "＃">現在の問題</a> </li> <li> <a href = "＃">スポーツ</a> </li> <li> < <div>エンターテイメント</div> </div> </body>
2.CSSパート：スタイルパーツを実装するには多くの方法があります。これは私が書いた単純なデモであり、私が最悪のCSSです。 <...
.tab_menu .selected {background-color：#aaa;} .tab_menu ul {height：30px;} .tab_menu li {float：left; list-style：none; width; width：height：30px; color：＃000; border：solid 1px灰色;ボーダーボトム：なし;テキストアライグ：センター;ラインハイト：30px;マージン右：3px;} .tab_menu ul li a {text-decoration：none;} .tab_box {width：170px; height：150px; border：solid 1px grey;} .tab_box .hide：none;}3.重要なJSパーツ：
window.onload = function（）{var otab = document.getElementById（ 'tab'）; var ali = otab.getelementsbytagname（ 'li'）; var otabbox = otab.getelementsbytagname（ 'div'）[1]; var abox = otabbox.getElementsBytagname（ 'div'）; for（var i = 0; i <ali.length; i ++）{ali [i] .index = i; Ali [i] .onclick = function（）{for（var j = 0; j <ali.length; j ++）{ali [j] .classname = ''; //キャンセルメニュースタイルabox [j] .classname = 'hide'; //すべてのtabdivs} ali [this.index] .classname = 'selected'; abox [this.index] .classname = ''; }}}これはシンプルで粗雑であり、TabmenuとTabboxに複数のスタイルがあるかどうかは考慮しておらず、プロジェクトに適応しないことは単なる考え方です。多くの場所を改善する必要があります。以下は、複数のクラスにタグ付けされている状況を考慮しますが、一般的に複数のクラスがあります。次に、スキルを使用して特定のクラスを削除し、クラスを追加する必要があります。
3.1ネイティブJSにクラスを追加および削除します。
window.onload = function（）{var otab = document.getElementById（ 'tab'）; var ali = otab.getelementsbytagname（ 'li'）; var otabbox = otab.getelementsbytagname（ 'div'）[1]; var abox = otabbox.getElementsBytagname（ 'div'）; for（var i = 0; i <ali.length; i ++）{ali [i] .index = i; ali [i] .onclick = function（）{for（var j = 0; j <ali.length; j ++）{var aclass = ali [j] .classname.split（ ''）; // element.classnameは文字列であり、アレイvar aclass1 = abox [j] .split（ ''）; z = 0; z <aclass.length; z ++）{if（aclass [z] == 'selected'）{aclass.splice（z、1）; // var k = 0; k <aclass1.length; k ++） aclass1.splice（k、1）; }} ali [j] .classname = aclass.join（ ''）; //すべてのメニューは選択したスタイルを削除しますabox [j] .classname+= 'hide'; //すべてのボックスはabox [this.index] .class1.join（ ''）;スタイル}}}}個人テストは効果的ですが、1つの方法ではすべて少し乱雑です。さらに、多くのクラスがある場合、効率も問題ですが、多くのクラスは存在しないはずです==将来それを最適化します。この関数は、jQueryを使用するのが非常に簡単です。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。