JavaScriptでタブ切り替え効果を実装（自作ネイティブjs）_javascriptスキル

現在のページには、ポップアップ レイヤー効果、シームレスなスクロール効果、タブ切り替え効果など、さまざまなページ効果がたくさんあります。今日は、ネイティブ JavaScript を使用して自分で作成したタブ切り替えエフェクトを共有します。私のスキルが限られているため、問題がある場合はご指摘ください。
レンダリングは次のとおりです:

html コード:

コードをコピー コードは次のとおりです。

;meta charset=" UTF-8">

ホームページ
テクノロジー
生活
作品

ホームページホームページホームページホームページホームページホームページホームページ

テクノロジー テクノロジー テクノロジー テクノロジー テクノロジー テクノロジー テクノロジー

ライフ ライフ ライフ ライフ ライフ ライフ ライフ ライフ

< ;p class="tabs-content Hide">worksworksworkworks

" id="tabs2">

11111
22222
/a>

11111111111111111111111111111111

-コンテンツ非表示>22222222222222222222222222222222222

3333333333333333333333333333333333333

ここで、base.css は、
私の CSS フレームワーク、base.css
を指します。

JavaScript コード
:

コードをコピー
コードは次のとおりです:

function tabs(id,trigger){ var tabsBtn = document.getElementById(id).getElementsByTagName('h2')[0].getElementsByTagName('a'); var tabsContent = document.getElementById (id) .getElementsByTagName('p'); for(var i = 0,len = tabsBtn.length; i tabsBtn[i].index = i; if(trigger == 'click'){ tabsBtn[i].onclick = function(){ clearClass();

this.className = 'on'; );

}
}else if(trigger == 'mouseover'){
tabsBtn[i].onmouseover = function(){
clearClass(); on';
showContent(this.index);
}
}
}
function showContent(n){
for(var i = 0,len = tabsBtn.length; i < len; i ){
tabsContent[i].className = 'hide';
tabsContent[n].className = 'tabs-content'; clearClass() {
for(var i = 0,len = tabsBtn.length; i < len; i ){
tabsBtn[i].className = '';
}
}
}


注:
1. ホームページ、技術、生活、作品などのタイトルは h2 タグ内にあります。
2. on という名前のクラスを使用して現在のタイトルを表示します。selected などの別のクラスに変更する場合は、tabs.js の対応する内容を変更する必要があります。
3. タイトルに該当する内容は p タグ内にあります。 p タグ内にそれ以上の p タグを含めることはできません。
追伸: これらは、暇なときに学んだ JavaScript の知識に基づいて、何気なく書いたエフェクトです。