JSの基本-タブバー切り替えの実例

実現した効果：

上のモジュールの下にあるテキストをクリックして、それに応じて表示します。

アイデア：

全体は2つの部分に分かれています。最初の部分は、上の項目をクリックして、クリックされた効果のあるものに対応する方をクリックすることです。記事ブログ：JSの基本-排他的な思考ケース_setTimeout（）ブログ-CSDNブログ

2番目の部分は、上の項目をクリックして下のコンテンツを表示することです。これはカスタム属性によって実現されます。ここでは、上と下のカスタム属性を設定します。完全なコードは次のとおりです。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab切り替え</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 800px;
            height: 100px;
            margin: 200px auto;
        }
        
        .box .tabtop {
            width: 800px;
            height: 40px;
            background-color: #eef1ee;
        }
        
        .box .tabtop ul li {
            list-style: none;
            float: left;
            line-height: 40px;
            padding: 0 10px;
            font-size: 14px;
            cursor: pointer;
        }
        
        .hs {
            color: #fff;
            background-color: #c61521;
        }
        
        .box .tabitem {
            font-size: 14px;
        }
        
        .box .tabitem div {
            display: none;
        }
    </style>
</head>
 
<body>
    <div class="box">
        <div class="tabtop">
            <ul>
                <li class="hs">商品紹介</li>
                <li>規格と梱包</li>
                <li>アフターサービス</li>
                <li>商品詳細(50000)</li>
                <li>スマートフォン</li>
            </ul>
        </div>
        <div class="tabitem" id="tb-item">
            <!-- 内容部 -->
            <div style="display: block;">商品紹介モジュール内容</div>
            <div>企画梱包内容</div>
            <div>アフターサービス内容</div>
            <div>商品詳細内容</div>
            <div>スマートフォン内容</div>
            <div></div>
        </div>
    </div>
    <script>
        // 全てli要素取得
        var lis = document.querySelectorAll('li');
        // 全て内容部要素取得
        var content = document.getElementById('tb-item').querySelectorAll('div');
        // 上記の内容部カスタマイズ
        for (var i = 0; i < content.length; i++) {
            content[i].setAttribute('index', i);
        }
        for (var i = 0; i < lis.length; i++) {
            lis[i].setAttribute('indexs', i);
        }
        for (var i = 0; i < lis.length; i++) {
            lis[i].onclick = function() {
                for (var j = 0; j < lis.length; j++) {
                    lis[j].className = '';
                }
                this.className = 'hs';
                for (var j = 0; j < content.length; j++) {
                        for (var k = 0; k < content.length; k++) {
                            content[k].style.display = 'none';
                        }
                        content[j].style.display = 'block';
                    }
                }
 
            }
        }
    </script>
</body>
 
</html>