选项卡效果

最新推荐文章于 2024-05-23 11:18:50 发布

超级无敌奥特蔓

最新推荐文章于 2024-05-23 11:18:50 发布

阅读量452

点赞数

分类专栏： Dom 文章标签： javascript

本文链接：https://blog.csdn.net/m_0_1_0_1/article/details/123857543

版权

Dom 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

功能实现效果：点击选项卡按钮，出现相对应的详细模块

思路：第一步需要先获取到所有的按钮，然后为每个按钮添加点击事件。循环遍历每一个按钮的时候使用forEach更加方便(相比之前的for循环)。当某个按钮想要一枝独秀的时候，首先在其之前为所有的按钮都添加同一种样式或则效果。比如当点击某个按钮的时候，只想让被点击的按钮自己变红，首先要做的就是让所有的先全部变黑，然后再让被点击的那个变红。对应的详情展示效果也是如此，先让全部的隐藏，最后把被点击按钮的详情展示即可。

<!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>Document</title>
    <style>
        .con div {
            display: none;
        }
        
        .active {
            color: red;
        }
    </style>
</head>

<body>
    <div class="btn">
        <button style="color: red">综合</button>
        <button>娱乐</button>
        <button>新闻</button>
    </div>
    <div class="con">
        <div style="display: block">
            <p>综合1</p>
            <p>综合2</p>
            <p>综合3</p>
        </div>
        <div>
            <p>娱乐1</p>
            <p>娱乐2</p>
            <p>娱乐3</p>
        </div>
        <div>
            <p>新闻1</p>
            <p>新闻2</p>
            <p>新闻3</p>
        </div>
    </div>
    <script>
        //获取所有的按钮
        var btns = document.querySelectorAll(".btn button");
        //循环遍历每一个按钮
        btns.forEach(function(v, i) {
            v.onclick = function() {
                console.log(v, i); //点击的按钮 和点击的按钮的 下标
                btns.forEach(function(v1) {
                    //先全部变黑（设置行内样式）
                    v1.style.color = "black";
                });
                //点击的btn变红
                v.style.color = "red";
                var divs = document.querySelectorAll(".con div");
                //根据按钮的下标获取对应的div
                var div = divs[i];
                //先宣布让所有的div隐藏
                divs.forEach(function(v2) {
                    v2.style.display = "none";
                });
                //点击的按钮对应的div出现
                div.style.display = "block";
            };
        });
    </script>
</body>

</html>

超级无敌奥特蔓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选项卡效果

功能实现效果：点击选项卡按钮，出现相对应的详细模块思路：第一步需要先获取到所有的按钮，然后为每个按钮添加点击事件。循环遍历每一个按钮的时候使用forEach更加方便(相比之前的for循环)。当某个按钮想要一枝独秀的时候，首先在其之前为所有的按钮都添加同一种样式或则效果。比如当点击某个按钮的时候，只想让被点击的按钮自己变红，首先要做的就是让所有的先全部变黑，然后再让被点击的那个变红。对应的详情展示效果也是如此，先让全部的隐藏，最后把被点击按钮的详情展示即可。<!DOCTYPE html.
复制链接

扫一扫