JS重点！选项卡

最新推荐文章于 2022-11-26 06:52:15 发布

87小太阳

最新推荐文章于 2022-11-26 06:52:15 发布

阅读量49

点赞数

分类专栏： JS案例 JS必会项目案例文章标签： javascript css 前端

本文链接：https://blog.csdn.net/weixin_53798158/article/details/127821887

版权

JS案例同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

JS必会项目案例

5 篇文章 0 订阅

订阅专栏

<!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>
        *{
            margin: 0;
            padding: 0;
        }

        ul,ol,li{
            list-style: none;
        }

        .box {
            width: 600px;
            height: 400px;
            border: 3px solid #666;
            margin: 50px auto;
            display: flex;
            flex-direction: column;
        }

        .box > ul{
            height: 60px;
            display: flex;
        }

        .box > ul > li {
            flex: 1;
            background-color: skyblue;
            color: white;
            font-size: 22px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;

        }

        .box > ul > li.active{
            background-color:orangered;
        }

        .box>ol{
            flex: 1;
            position: relative;
        }

        .box > ol > li{
            width: 100%;
            height: 100%;
            background-color: purple;
            position: absolute;
            left: 0;
            top: 0;
            font-size: 100px;
            color: #fff;
            display: none;
        }
        .box > ol > li.active{
            display: block;
        }

    </style>
</head>
<body>
    <div class = "box">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </div>
    <script>
        // 用户点击按钮 前提先获取按钮 

        var btn = document.querySelectorAll("ul > li");

        // 让内容 显示或者 隐藏 前提也得获取内容 
        var boxes = document.querySelectorAll("ol > li");

        for(var i=0;i<btn.length;i++){  
            // 能够点击按钮 这时候已经是循环结束了 
            // 循环不结束 每个按钮不能点击 
            // i =2 接下来 i++ i=3
            // 3>3 
            // 循环结束
            
            // i=3 3再给到匿名函数 
            // dataset 默认每个元素都会有 自己起了一个名字 叫index
            // <p data-index='1'>
            btn[i].dataset.index  = i;
            btn[i].onclick = function(){
                // alert(i); // 3
                // 为了拿到 0  1  2 
                // 绑定点击效果以前 准备一个容器 存一下 
                // alert(this.dataset.index);

                // 点击每个按钮以前让所有的按钮取消高亮 状态
                // 让所有的内容全部隐藏 
                for(var i=0;i<btn.length;i++){
                    btn[i].className ="";
                    boxes[i].className ="";
                }

                // 点击谁谁高亮
                // 点击谁 谁对应的内容显示 
                btn[this.dataset.index].className = 'active';
                // boxes[this.dataset.index].className = 'active';
                boxes[this.dataset.index].style.display = 'block';

            }
        }
    </script>
</body>
</html>