シンプルなタブバー切り替えコンテンツバーを実装するJavaScript

この記事では、タブバーの切り替えコンテンツバーを簡単に実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

HTML+CSS部分

<!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>
    <スタイル>
        /* デフォルトのマージンがあるため、CSS を初期化します*{ margin:0; padding:0;}

h1、h2、h3、h4、h5、h6{フォントサイズ:100%; フォントの太さ:通常;}

ol,ul{ リストスタイル:なし;}

img,fieldset{ border:0 none; display:block;} */
        div、ul、li{
            ボックスのサイズ: 境界線ボックス;
            マージン: 0;
            パディング: 0;
        }
        ul{
            リストスタイルタイプ: なし;
        }
        {
            テキスト装飾: なし;
        }
        #nav{
            幅: 450ピクセル;
            高さ: 400px;
            margin: 100px auto;/*左右中央*/
            背景色: ピンク;
            パディング: 0;
            フォントサイズ: 14px;
        }
        
        li{
            フロート: 左;
            幅: 150ピクセル;
            高さ: 30px;
            テキスト配置: 中央;
            行の高さ: 0.6rem;
            境界線: 0.02rem 実線 #ccc;
        }
        。コンテンツ{
            クリア: 両方;
            位置: 相対的;
        }
        .コンテンツdiv{
            幅: 450ピクセル;
            高さ: 370ピクセル;
            位置: 絶対;
            表示: なし;
        }
        .tab .choose{
            背景色: スカイブルー;
        }
        .コンテンツ .現在{
            表示: ブロック;
        }
    </スタイル>
    <script src="jQuery.mini.js"></script>
   
</head>
<本文>
    <div id="nav">
        <div class="tab">
            <ul>
                <li class="choose" ><a href="#" > 1</a></li>
                <li><a href="#" >2</a></li>
                <li><a href="#" >3</a></li>
            </ul>
        </div>
        <div class="content">
            <div class="current">1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </div>
    </本文>
</html>

ネイティブ js コード

var lis = document.querySelectorAll('li');
var divs = document.querySelector('.content').querySelectorAll('div');
  for(var i=0; i<lis.length; i++){
            lis[i].setAttribute('dateIndex',i);//後でコンテンツバーをロックしやすくするために各liのインデックスを設定します lis[i].addEventListener('click',function(){
                for(var j=0; j<lis.length; j++){
                    lis[j].className = ''; //すべてのliのスタイルを空に設定する}
                this.className = 'choose'; //現在クリックされているliのスタイルを設定する（排他的）
                var index = this.getAttribute('dateIndex'); //現在のliのインデックスを取得します
                // コンソール.log(インデックス);
                for(var j=0; j<lis.length; j++){
                   divs[j].className = '';//排他的// lis[i].className = 'choose';
                }
                divs[index].className = 'current';
          })
        }

## jQuery メソッド ```javascript
// jQuery メソッド $(function(){
            $("li").click(function(){
                $(this).addClass("choose"); //現在クリックされているliにスタイルを追加します $(this).siblings("li").removeClass("choose"); //兄弟要素からスタイルを削除します（排他的）
                var index = $(this).index(); //現在クリックされているliのインデックスを取得します
                $(".content div").eq(index).show().siblings("div").hide();
                // 対応するコンテンツボックスをインデックスで取得し、show() で表示し、兄弟要素を選択して非表示にします。分解 ======》
                //$(".content div").eq(index).show();
                // $(".content div").eq(index).siblings("div").hide()
            })
        })