js完成简单选项卡

最新推荐文章于 2023-11-11 09:49:22 发布

你是我遥远万里最牵挂的猪

最新推荐文章于 2023-11-11 09:49:22 发布

阅读量318

点赞数 1

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

本文链接：https://blog.csdn.net/Leejinian888/article/details/94400956

版权

javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

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

        .box {
            margin: 50px auto;
            width: 300px;
            height: 300px;
            border: 1px solid;
            overflow: hidden;
        }
        .bg {
            background-color: skyblue;
        }
        .box .btn {
            height: 20px;
        }
        .box .btn button {
            cursor: pointer;
            width: 50px;
            float: left;
            margin: 0 5px;
        }
        .box .content {
            height: 280px;
        }
        .box .content div {
            font-size: 60px;
            text-align: center;
            line-height: 280px;
            height: 280px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="btn">
            <button>按钮A</button>
            <button>按钮B</button>
            <button>按钮C</button>
            <button>按钮D</button>
            <button>按钮E</button>
        </div>
        <div class="content">
            <div>AAAAA</div>
            <div>BBBBB</div>
            <div>CCCCC</div>
            <div>DDDDD</div>
            <div>EEEEE</div>
        </div>
    </div>
    <script>

        var btns = document.querySelectorAll("button"); //获取元素
        var content = document.querySelector(".content");
        var divs = content.querySelectorAll("div");
        // console.log(btns,content,divs);
        for (var i = 0; i < btns.length; i++) {       //遍历获取按钮时所组成的数组(btns)
            btns[i].index = i;       //给btns数组中所有的按钮设置一个下标，为了给下面的divs数组用。
            btns[i].onclick = function () {        //绑定点击事件
                for (var j = 0; j < btns.length; j++) {     //排他，把所有的清除和隐藏
                                            //循环里面有事件处理函数, 执行顺序是先执行完毕循环, 再执行事件
                                            //因为函数是通过事件调用的, 函数里面的this就是事件调用者
                    btns[j].className = "";     //让所有按钮的样式都清空
                    divs[j].style.display = "none";    //让所有div隐藏 
                }
                this.className = "bg";          
                divs[this.index].style.display = "block";   //this.index表示(btns)的下标，把他给divs用
                // console.log(this.index);   
                
            }
        }

    </script>
</body>

</html>

效果图

你是我遥远万里最牵挂的猪

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js完成简单选项卡

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫