js 选项卡实现方法

最新推荐文章于 2023-07-01 18:20:34 发布

zc108511

最新推荐文章于 2023-07-01 18:20:34 发布

阅读量374

点赞数

文章标签： javascript js html css

本文链接：https://blog.csdn.net/zc108511/article/details/127937359

版权

1.首先写好html和css样式

2.然后用querySelectorAll（）方法获取span元素和div元素，这样返回的是一个伪数组，所以要先循环给每一span绑定单击事件，然后再循环给每一个div和span添加一个空类名。当点击某选项的时候，后会先执行清空类名，然后把设置好样式的类名赋给当前点击的标签。

    <style>

        .box {
            width: 800px;
            height: 500px;
            background: #666;
            border: 1px #000 solid;
            margin: 100px auto;
        }
        .box .box_top {
            display: flex;
            background: #999;
            text-align: center;
        }

        .box .box_top span {
            flex: 1;
            display: block;
            line-height: 80px;
        }
        .bgc {
            background: #000;
            color: chartreuse;
        }
        .box .box_bottom {
            height: 420px;
            font-size: 100px;
        }
        .box .box_bottom div {
            width: 800px;
            height: 420px;
            background: #555;
            position: absolute;
            display: none;
        }
        .box .box_bottom .show {
            display: block;
        }
    </style>
</head>

<body>

    <div class="box">
        <div class="box_top">
            <span class="bgc">扫地</span>
            <span>空净</span>
            <span>电暖</span>
            <span>清洁</span>
        </div>
        <div class="box_bottom">
            <div class="show">扫地机器人</div>
            <div>空气净化器</div>
            <div>电暖器</div>
            <div>清洁器</div>
        </div>
    </div>



    <script>
        // 首先获取元素
        var allSpan = document.querySelectorAll('span')
        var allDiv = document.querySelector('.box_bottom').querySelectorAll('div')
        for (var i = 0; i < allSpan.length; i++) {

            //  外部循环，给每一span绑定单击事件
            allSpan[i].onclick = function () {

                //  内部循环
                for (var j = 0; j < allSpan.length; j++) {
                    // 给每一个span
                    allSpan[j].className = ''
                    // 给每一个div添加一个空类名
                    allDiv[j].className = ''
                    // 给每一个span添加一个自定义属性，属性值和下标对应
                    allSpan[j].setAttribute('index', j)

                }
                // 每次点击后上面的循环会先执行清空类名 
                // 然后把设置好样式的类名赋给当前点击的标签，
                this.className = 'bgc'

                // 获取当前点击的标签对应的属性值，给他*1转成number类型
                var index = this.getAttribute('index') * 1

                // 每次点击后上面的循环会先执行清空类名
                // 因为index的值和span的下标是对应的，
                // 把这个值给对应的div，然后再给这个div添加一个样式
                allDiv[index].className = 'show'
            }
        }
    </script>
</body>

zc108511

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 选项卡实现方法

2.然后用querySelectorAll（）方法获取span元素和div元素，这样返回的是一个伪数组，所以要先循环给每一span绑定单击事件，然后再循环给每一个div和span添加一个空类名。当点击某选项的时候，后会先执行清空类名，然后把设置好样式的类名赋给当前点击的标签。
复制链接

扫一扫