この記事では、参照のためにネイティブ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をもっとサポートすることを願っています。