タブバーの切り替え効果を実現するJavaScript

タブバー: 異なるタブをクリックすると異なるコンテンツが表示され、クリックしたタブのスタイルが変更されます (選択されたタブが強調表示されます)

実装のアイデア:

1. タブバーを 2 つの部分に分割し、上部をナビゲーションリスト、下部を各部分に対応するコンテンツにします。タグとコンテンツを書き出します。コンテンツをタグの順序で書き出します。各タグにカスタム属性 - - -index を追加します。属性値は 0 から始まり、1 ずつ増加します。

2. まず、上記の効果を実現します。クリックすると、スタイルが切り替わり、クリックしたテキストのフォント色や背景色などが変わります。

①cssは、変更されたスタイルを定義するクラス（例：current）を定義します。まず、最初のタグにクラス名を記述し、他のタグにはクラス名を記述しません。
②js はすべてのタグ要素オブジェクトを取得し、- - - for ループで各タグをトラバースしてバインドします - - - onclick クリックイベント ③クリックイベントで排他アルゴリズムを使用します - - - for ループですべてのタグのクラス名を空に設定します - - - className = ''、次に上記で定義した特別なクラス名を現在クリックされているタグに設定します - - - this.className = 'current';

3. 以下を実装すると、クリックしたラベルに応じて異なるコンテンツが表示されます。

①cssは最初のタグに対応するコンテンツを表示し、他のタグを非表示にします。

.box-tb .item:n番目の子(n+2) {
表示: なし;
}

② コンテンツのすべての要素オブジェクトを取得し、タグのインデックス値を取得して、クリックイベントに専用の思考コードを追加します - - - for ループ - - - コンテンツの要素オブジェクトを走査し、すべてのコンテンツを非表示に設定します - - - items[i].style.display = 'none'; 次に、クリックされたタグに応じて対応するコンテンツを表示します - - - items[index].style.display = 'block';

コード例:

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>タブバースイッチ</title>
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
        }
        
        li {
            リストスタイル: なし;
        }
        
        。箱 {
            幅: 600ピクセル;
            マージン: 100px 自動;
        }
        
        .box-th {
            オーバーフロー: 非表示;
            幅: 100%;
            背景色: #88ace6;
        }
        
        .box-th ul li {
            フロート: 左;
            幅: 90ピクセル;
            高さ: 20px;
            右マージン: 10px;
            パディング: 5px;
            テキスト配置: 中央;
        }
        
        。現在 {
            色: #fff;
            背景色: 緑;
        }
        
        .box-tb {
            上マージン: 20px;
        }
        
        .box-tb .item:n番目の子(n+2) {
            表示: なし;
        }
    </スタイル>
</head>

<本文>
    <div class="box">
        <div class="box-th">
            <ul>
                <li data-index="0" class="current">春</li>
                <li data-index="1">夏</li>
                <li data-index="2">秋</li>
                <li data-index="3">冬</li>
            </ul>
        </div>
        <div class="box-tb">
            <div class="item">春は四季の最初の季節であり、そこから新しいサイクルが始まります。春は、植物が芽吹き、暖かい風と太陽が輝き、鳥が歌い、花が咲くなど、暖かさと成長を表します。この季節は気温、日照時間、降雨量が一年の転換点にあり、上昇または増加する傾向があります。春は陰陽のエネルギーが変化し始め、陽のエネルギーが高まるにつれてすべてのものが芽生え、成長します。春は成長の季節であり、春の耕作と種まきの季節です。「一年の計画は春に始まる」ということわざがあります。 春の始まりと終わり：天文現象の変化に応じて分けられます。伝統的に、春は「立春」（北斗七星が陰を指し、太陽が黄道経度の315°に達するとき）に始まり、「立夏」に終わります。 気温の変化による区分：現代では、学者張宝坤の「平年平均気温」区分が採用されています。平年平均気温（連続5日間の気温の平均）が10℃以下から10℃以上に着実に上昇すると春が始まり、平年平均気温が22℃以上（夏の始まり）になると春が終わります。
            </div>
            <div class="item">夏は、あらゆるものが繁茂し、作物が成長のピークを迎える季節です。気温が上昇し、暑くなり、強風や暴風雨が頻繁に発生し、万物が旺盛に成長します。夏は嵐が最も多い季節で、強風や大雨が伴うことが多いです。北半球の夏には、大陸が暖められて気圧が上昇し低気圧が形成され、一方、海洋の恒温は相対的に低く高気圧が形成されます。循環により、夏には南東から風が吹きます。夏の間、北半球全体で日照時間が最も長くなります。 夏の始まりと終わり：天文現象の変化に応じて分けられます。「立夏」（北斗七星が南東を指し、太陽が黄道の45度に達する）が夏の始まりであり、「立丘」で終わります。 気温の変化に基づいて、夏は季節の平均気温が安定して 22℃ を超えると始まり、季節の平均気温が 22℃ を下回ると終わります。
            </div>
            <div class="item">秋は収穫の季節であり、すべてのものが豊かな成長から枯れた成熟へと移り変わることを意味します。秋の最初の 2 つの節気、立秋と暑気終りは、太陽の熱がまだ弱まっていないため、依然として非常に暑いです。いわゆる「暑さは 3 つの猛暑日」です。3 つの猛暑日は、小暑と暑気終りの間にあり、年間で最も気温、湿度、暑さが高くなります。真夏の湿度が高い理由は、真夏の間は南東風が吹き、南東は太平洋とインド洋で、空気は湿っており、湿った風が真夏の間は湿度が高くなるためです。晩秋にはその逆で、北西風が吹き、北西は乾燥した内陸部で、乾燥した北西風が晩秋の乾燥した気候を引き起こします。秋の最初の 2 つの節気の気候特性は、湿気が多く蒸し暑いことです。秋の本当の涼しさは、通常、白露節気の終わりまで来ず、それ以降は徐々に涼しく乾燥していきます。晩秋になると、気候も暑さから涼しさに変わり、寒さが増すにつれてすべてのものが徐々に枯れていく、暑さと寒さが交互に訪れる季節です。秋の最も明らかな変化は、草や木の葉が青々とした緑から黄色に変わり、落ち始める一方で、作物が成熟し始めることです。
                [1] 秋の始まりと終わり：秋は秋の初め（北斗七星が南西を指し、太陽が黄道135度に達するとき）に始まり、冬の初めに終わります。 気温の変化に基づいて、秋は季節の平均気温が22℃以上から22℃以下に着実に下がると始まり、季節の平均気温が10℃以下に下がると終わります。
            </div>
            <div class="item">冬は陰陽が変わり、万物は蓄えられた状態から隠された状態になり、植物は生命力を保ちます。冬の始まりは、乾燥して雨の多い秋の気候が徐々に過ぎ去り、雨が多く寒くて凍えるような冬の気候に変わることを意味します。北半球では太陽の位置が低くなり、日照時間が短くなります。 「暑さ厳しき日、寒さ厳しき日」ということわざがあります。冬至は「最初の9日間」です。冬至前はそれほど寒くありません。冬至後、強い寒気が頻繁に南下し、南嶺山脈を越えます。気温が急激に下がり、寒くなります。冬至後、冬は本当に寒くなります。冬の始まりと終わり：天文上の変化に基づく：「立冬」（北斗七星が北西を指し、太陽が黄道経度225°に達する）が冬の始まりであり、次の「立春」で終わります。気温の変化に基づく：冬は、季節の平均気温が着実に10℃を下回ると始まり、季節の平均気温が10℃を超えると終わります。
            </div>
        </div>
    </div>

    <スクリプト>
        var list = document.querySelector('.box-th').querySelectorAll('li');
        var items = document.querySelector('.box-tb').querySelectorAll('.item');
        (var i = 0; i < list.length; i++) の場合 {
            リスト[i].onclick = 関数() {
                // ナビゲーションバーのスタイル切り替え、排他的アルゴリズム for (var i = 0; i < list.length; i++) {
                    リスト[i].className = '';
                }
                this.className = '現在の';

                // 以下はコンテンツ切り替え、排他的アルゴリズムを示しています var index = this.getAttribute('data-index');
                (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'なし';
                }
                items[index].style.display = 'ブロック';
            }
        }
    </スクリプト>
</本文>

</html>

ページ効果: