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

<div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">製品紹介</li><!-- 最初の li はデフォルトで選択されており、current は赤い背景と白いテキストのスタイルを決定します -->
                <li>仕様とパッケージ</li>
                <li>アフターセールス保証</li>
                <li>製品レビュー (50,000)</li>
                <li>モバイル コミュニティ</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;"><!-- すべてのアイテムの表示値が none であるため、このアイテムはデフォルトで表示されます -->
                製品紹介モジュールコンテンツ</div>
            <div class="item">
                仕様とパッケージモジュールの内容</div>
            <div class="item">
                アフター保証モジュールコンテンツ</div>
            <div class="item">
                製品レビュー（50000）モジュールコンテンツ</div>
            <div class="item">
                モバイル コミュニティ モジュール コンテンツ</div>
 
        </div>
</div>

<スクリプト>
        // ビジネス要件: タブ バーをクリックします。クリックされたタブ バーはスタイルが異なり、コンテンツを変更する効果を実現するには、その下の div も切り替える必要があります。var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var タブ = document.querySelectorAll('.item');
        (var i = 0; i < lis.length; i++) の場合 {
            lis[i].setAttribute('data-index', i); // 各 li に data-index カスタム属性を追加します。値は lis 内の独自の添え字です。この値により、現在クリックしている li を判別し、後で対応する div の表示値を変更するのに役立ちます。lis[i].onclick = function () {
                // 1. 最初のステップは、排他的なアイデアを使用して、クリックしたユーザーにクラス属性を割り当てることです。クリックされていない他の項目のクラス値は空のままにしておく必要があることに注意してください。これは、他の人を殺して自分だけを残すという排他的なアイデアです for (var i = 0; i <lis.length; i++) {
                    lis[i].className = ''; // ループを使用して全員（自分自身を含む）のクラス名を空にします}
                // 次に、クラス名を自分用に修正して、自分に任せます this.className = 'current'; // 現在のクラス名の CSS スタイルが記述されています // 次に、上記のタブ バー スタイルを処理する必要があります。 2 番目のステップは、クリックされたものに対応する従属 div を表示し、クリックされていない他の div を非表示にすることです。 ここでは、主に、まずユーザーがクリックしたものを把握し、次にオブジェクト div の表示をブロックするように設定する必要があります。それを実行するには、まだ排他的な思考を使用する必要があります // ステップ 2: クリックに応じて div の表示属性値を変更します var index = this.getAttribute('index'); // 現在クリックされている li のインデックスを取得します
                for (var i = 0; i < lis.length; i++) { // ループを使用して各項目の表示をnoneに設定し、すべての項目を終了します。tabs[i].style.display = 'none';
                }
                // タブで、li のインデックスに対応する項目をロックし、その表示値をブロックに変更して、私だけを残します。tabs[index].style.display = 'block';
            }
        }
</スクリプト>