选项卡······疑难解惑

最新推荐文章于 2022-12-31 17:50:11 发布

王濤

最新推荐文章于 2022-12-31 17:50:11 发布

阅读量199

点赞数

分类专栏： js html&css 文章标签： javascript html5 html css css3

本文链接：https://blog.csdn.net/Anber_wang/article/details/105802597

版权

js 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

html&css

7 篇文章 0 订阅

订阅专栏

做题思路

方法1：

       实现思路:
         1, ul中的li标签个数  和 ol中li标签个数是相同的
            按钮和内容是一一对应的

         2, 点击按钮标签,也就是ul中的li标签
            给当前这个li标签,添加class样式,给其他的li标签,去除class样式
            实现思路: 先给所有的li标签,去除class样式
                     再给当前的li标签,添加class样式

         3, 点击按钮标签,也就是ul中的li标签
            给 ol 中所有的 li标签,去除class样式
            给 与 当前 ul>li 索引相同的 ol>li标签,添加样式

方法1：循环遍历的方法

<head>
    <meta charset="UTF-8">
    <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;
        }

        .cont{
            width: 800px;
            height: 600px;
            border: 5px solid #333;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
        }

        .cont ul{
            width: 100%;
            height: 60px;
            display: flex;
        }

        .cont ul li{
            flex:1;
            font-size: 35px;
            color: #fff;
            border-left: 2px solid blue;
            border-right: 2px solid blue;
            background: hotpink;
            display: flex;
            justify-content: center;
            align-items: center;

        }

        .cont ol{
            flex:1;
            position: relative;
        }

        .cont ol li{
            width: 100%;
            height: 100%;
            font-size: 150px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top:0;
            left:0;
            background: burlywood;
            display: none;
        }

        /* 按钮标签 哪个标签有这个属性,哪个就显示特殊背景颜色 */
        .cont ul li.active{
            background: skyblue;
            color: black;
        }

        /* 内容标签 哪个标签有这个属性,哪个就显示 */
        .cont ol li.active{
            display: flex;
        }

    </style>
</head>
<body>
    <div class="cont">
        <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>
        // tab切换 / 选项卡 效果

        var oUllis = document.querySelectorAll('ul li');
        var oOllis = document.querySelectorAll('ol li');

        // 循环 ul中的所有li,添加点击事件
        oUllis.forEach(function(item , key){
            // ul中的li标签 , item就是ul中的li标签
            item.onclick = function(){
                // 1,清除所有的ul,ol,中li的class样式属性
                // 循环遍历所有的ul和ol中的标签
                oUllis.forEach(function(v , k){
                    // v是ul中的li标签
                    v.className = '';
                    // ul>li和ol>li索引是相同的
                    // 通过ul中li的索引也可以获取ol中的li标签
                    // oOllis[k] 就是 ol中的li标签
                    oOllis[k].className = '';
                })
                // 循环结束,所有的ul,ol中,li都没有active


                // 给当前点击的item标签,也就是ul,li标签,添加样式
                item.className = 'active';

                // 给ol中,对应的这个标签的索引的li标签,添加样式
                oOllis[key].className = 'active';
            }
        })

    </script>
</body>

方法2，事件委托方法

在这里我们只提供 js 部分的代码哦！因为其它方面的代码没有什么区别的

    <script>

        // 获取父级div标签对象
        var oDiv = document.querySelector('div');

        // 获取标签对象
        var ullis = document.querySelectorAll('ul li');
        var ollis = document.querySelectorAll('ol li');

        // 给父级div添加点击事件
        // 获取事件对象,我偷懒,不写兼容了
        oDiv.onclick = function(e){
            // 判断,点击的是ul中的li标签
            // e.target,就是触发点击事件的标签对象
            // 如果点击的标签对象,name是ulli,表示点击的是ul中的li标签
            if(e.target.getAttribute('name') === 'ulli'){
                // 1,给所有的li标签,清除样式
                ullis.forEach(function(item,key){
                    item.className = '';
                    ollis[key].className = '';
                    // 给item,也就是ul中的li标签,定义属性
                    item.setAttribute('index',key);
                })

                // 2,给当前ul中的li,添加样式
                // 没有循环 当前的li是 e.target
                e.target.className = 'active';

                // 3,给对应的ol中的li,添加样式
                // 没有forEach循环,没有索引下标,获取标签中定义的属性的属性值
                ollis[e.target.getAttribute('index')].className = 'active';
            }         
        }




    </script>

效果图：

王濤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选项卡······疑难解惑

做题思路方法1：实现思路: 1, ul中的li标签个数和 ol中li标签个数是相同的按钮和内容是一一对应的 2, 点击按钮标签,也就是ul中的li标签给当前这个li标签,添加class样式,给其他的li标签,去除class样式实现思路: 先给所有的li标签...
复制链接

扫一扫