仿京東tab欄切換 - tw511教學網

在這裡插入圖片描述
仿京東tab導航欄切換
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #eee;
        }

        ul {
            list-style: none;
        }

        .box {
            width: 1000px;
            position: relative;
            left: 50px;
            background-color: #fff;
        }

        .box ul {
            height: 38px;
            line-height: 38px;
            background-color: #f7f7f7;
            border-bottom: 1px solid red;
            overflow: hidden;
        }

        .box ul li {
            float: left;
            padding: 0 15px;
            cursor: pointer;
            font-size: 14px;
            color: #333;
        }

        .box ul li:hover {
            color: #e4393c;
        }

        .content {
            /* position: absolute;
            left: 0;
            top: 40; */
            display: none;
            width: 100%;
            height: 200px;
            background-color: #fff;
        }

        .active {
            background-color: #e4393c;
            color: #fff !important;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- tab導航 -->
        <ul>
            <li index='info'>商品介紹</li>
            <li index="specs">規格與包裝</li>
            <li index="Aftermarket">售後保障</li>
            <li index="comment">商品評價(2.2萬+)</li>
            <li index="phone">手機社群</li>
        </ul>
        <!-- 內容展示區域 -->
        <!-- 商品介紹 -->
        <div id="info" style="display: block;" class="content">商品介紹</div>
        <!-- 規格與包裝 -->
        <div id="specs" class="content">規格與包裝</div>
        <!-- 售後與保障 -->
        <div id="Aftermarket" class="content">售後與保障</div>
        <!-- 商品評價 -->
        <div id="comment" class="content">商品評價</div>
        <!-- 手機社群 -->
        <div id="phone" class="content">手機社群</div>
    </div>
    <script>
        var lis = document.querySelectorAll('li')
        var cs = document.querySelectorAll('.content')
        for (var i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                // 重置所有的li標籤為預設樣式
                reset()
                // 設定當前單擊的li標籤為active
                this.className = 'active'
                // 重置所有的content 為隱藏
                resetContent()
                // 設定當前單擊的li標籤對應的content顯示
                var index = this.getAttribute('index')
                document.querySelector(`#${index}`).style.display = 'block'

                /*var txt = this.innerHTML
                console.log(txt);
                if (txt == '商品介紹') {
                    document.querySelector('#info').style.display = 'block'
                } else if (txt == '規格與包裝') {
                    document.querySelector('#specs').style.display = 'block'
                }else if (txt == '售後保障') {
                    document.querySelector('#Aftermarket').style.display = 'block'
                }else if (txt == '商品評價(2.2萬+)') {
                    document.querySelector('#comment').style.display = 'block'
                }else if (txt == '手機社群') {
                    document.querySelector('#phone').style.display = 'block'
                }*/
            }
        }

        // 重置所有li標籤的樣式為預設樣式
        function reset() {
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = ''
            }
        }
        function resetContent() {
            for (var j = 0; j < cs.length; j++) {
                cs[j].style.display = 'none'
            }
        }
    </script>
</body>

</html>