js でシンプルなタブを実装する

タブ選択カードは、実際の Web ページで非常に頻繁に使用されます。基本的に、すべての Web ページでは 1 つ以上のタブ選択カードを使用する必要があります。

jsを使用して、シンプルなタブ選択効果を実現できます。

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

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>シンプルなカード選択エフェクト</title>
    <スタイル>
        ボディ、ul{
            マージン:0;
            パディング:0;
        }
        li{
            リストスタイル: なし;
        }
        .nav ul{
            ディスプレイ: フレックス;
        }
        .nav li{
            幅: 40%;
            マージン: 1rem;
            テキスト配置: 中央;
            フォントサイズ: 1.3rem;
        }
        .選択された{
            背景色: 黄色;
        }
        .コンテンツdiv{
            表示: なし
        }
        /* 最初はコンテンツの最初のブロックのみが表示されます*/
        .content div:n番目の子(1){
            表示: ブロック;
        }
    </スタイル>
</head>
<本文>
    <div class="nav">
        <ul>
            <!-- 最初に最初のオプションを選択します -->
            <li class="selected">ナビゲーション 1</li>
            <li>ナビゲーション 2</li>
            <li>ナビゲーション 3</li>
        </ul>
    </div>
    <div class="content">
        <div>コンテンツ 1</div>   
        <div>コンテンツ 2</div>  
        <div>コンテンツ 3</div>   
    </div>
    <スクリプト>
            //すべてのナビゲーション オプションを取得します var li = document.querySelectorAll(".nav li");
            //コンテンツのすべてのdivを取得します
            var div = document.querySelectorAll(".content div")
            for(var i=0;i<li.length;i++){
                  // 重要なのは、li と div の間に接続を確立することです li[i].index=i;
                li[i].onmouseover=関数(){
                   // すべてのオプションスタイルをクリアし、すべてのコンテンツを非表示にします for(var j=0;j<li.length;j++){
                        li[j].className="";
                        div[j].style.display="なし"
                    }
                    //マウスがホバーしているオプションのスタイルを設定すると、対応する div が表示されます this.className="selected";
                    div[this.index].style.display="ブロック";
                }
            }
        </スクリプト>
</本文>

</html>

ここで注目すべきは、この時点では、これはli[i]と同等であるということです。
li[i].index=i; このステップは、li と div の接続を確立するための鍵となるため、不可欠です。コード div[this.index].style.display="block"; を div[i].style.display="block"; に直接変更すると、効果は得られません。これは、i の値が 1 ずつ増加し続け、最終的に li.length と等しくなるため、マウスがどのオプションにあるかに関係なく、各 div が表示されないという誤った結果になるからです。

正しい効果図は次のとおりです。