原生JavaScript 04-tab栏切换
效果如下：

完整代码：

<!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">
    <style>
        .tab ul {
            list-style: none;
            display: flex;
            width: 400px;
            height: 50px;
            margin-bottom: 0;
        }

        li {
            flex: 1;
            border: 1px solid #000;
            text-align: center;
            line-height: 50px;
            font-weight: 700;
            font-size: 20px;
            /* background-color: #ccc; */
        }

        .current {
            background-color: #ccc;
        }

        .con {
            width: 400px;
            height: 300px;
            margin-left: 40px;
        }

        .con img {
            display: none;
            width: 100%;
        }

        .con img:nth-child(1) {
            display: block;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <div class="tab">
        <ul>
            <li class="current">绿</li>
            <li>蓝</li>
            <li>红</li>
            <li>紫</li>
        </ul>
        <div class="con">
            <img src="img/1.jpg" alt="">
            <img src="img/2.jpg" alt="">
            <img src="img/3.jpg" alt="">
            <img src="img/4.jpg" alt="">
        </div>
    </div>
    <script>
        // 1. 先进行 tab栏 上部分，点击了就要改变背景颜色

        // 获取元素
        let tab = document.querySelector('.tab');
        let con = tab.querySelector('.con');
        let ul = tab.querySelector('ul');
        let lis = ul.querySelectorAll('li');
        let imgs = con.querySelectorAll('img');

        //通过for循环 给每个li绑定点击事件
        for (let i = 0; i < lis.length; i++) {
            //给每一个设置自定义属性
            lis[i].setAttribute('data-index', i);
            lis[i].addEventListener('click', function () {
                let index = this.getAttribute('data-index');
                // 使用排他思想
                // 先把所有的背景颜色全为白色
                for (let i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                    imgs[i].style.display = 'none';
                }

                //再让当前的li 背景颜色改变
                this.className = 'current';

                //2. 下面的内容也要跟随上面改变
                imgs[index].style.display = 'block';

            })
        }
    </script>
</body>

</html>
0 条评论