JS笔记(4) 选项卡案例-CSDN博客

HTNL+CSS基础结构

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .box {
            width: 350px;
            margin: 20px auto;
        }

        .box ul {
            display: flex;
        }

        .box ul li {
            border: 1px solid rgb(172, 172, 172);
            padding: 5px 20px;
            margin-right: 20px;
            font-size: 16px;
            color: rgb(172, 172, 172);
            cursor: pointer;
        }

        .box ul li.active {
            border-bottom-color: #fff;
            color: chocolate;
        }

        .box div {
            display: none;
            border: 1px solid rgb(172, 172, 172);
            padding: 20px 25px;
            margin-top: -1px;
            font-size: 14px;
            color: rgb(136, 136, 136);
        }

        .box div.active {
            display: block;
        }
    </style>
复制代码

 <div id="box" class="box">
        <ul>
            <li class="active">三花</li>
            <li>英短</li>
            <li>奶牛</li>
        </ul>
        <div class="active">三花猫（Three Felinae），别名猫咪、家猫、野猫、土猫。是猫类的一种，世界各地均有分布。所谓的三花猫就是身上有 黑 、红（橘）和白三种颜色的猫，故名为三色猫。</div>
        <div>英国短毛猫，体形圆胖，四肢粗短发达，毛短而密，头大脸圆，温柔平静，对人友善，极易饲养</div>
        <div>所谓奶牛猫就是平时所说的黑白花。因为看起来像奶牛,所以就这么叫。 奶牛猫是普通的家猫（中华田园土猫种），都是属于杂交血统。</div>
    </div>
复制代码

一、方案一：定点清除

思路：

1.获取原相关元素
2.存储li元素第一项
3.循环所有li元素，当点击li元素时，把当前点击元素的上一项元素的类名清除，再给当前点击元素添加相应类名
4.给每一项li设置自定义属性：目的是让其对应的div元素能够通过myIndex属性值进行相关操作

        const lis = document.querySelectorAll('#box>ul>li');
        const divs = document.querySelectorAll('#box>div');
        
        let first = lis[0]; //
        for (let i = 0; i < lis.length; i++) {
            lis[i].myIndex = i
            //给每一项li设置自定义属性：目的是让其对应的div元素能够通过myIndex属性值 进行相关操作
            // console.log(lis[i].myIndex) // 0 1 2
            lis[i].onclick = function () {
                first.className = ''; //当点击lis元素的第一项时，把第一项的类名清空
                this.className = 'active'; //把当前点击的那一项lis[i]加上类名
                
                divs[first.myIndex].className = '';
                divs[i].className = 'active'
                
                first = this; // 让当前点击的那一项变成下次点击的上一个
            };
        };

复制代码

当点击第一项时: first = lis[0] i=0 first.myIndex=0，即把第一项li和div类名删除再把第一项类名加上此时：first = 当前点击项即第一项
当点击第二项时: first = lis[0] i=1 first.myIndex=1，即把第一项li和div类名删除再把第二项类名加上此时：first = 当前点击项即第二项
当点击第三项时: first = lis[0] i=2 first.myIndex=2，即把第二项li和div类名删除再把第三项类名加上此时：first = 当前点击项即第三项

二、方案二：大清洗

思路：

1.获取原相关元素
2.存储li元素第一项
3.循环所有li元素，当点击li元素时，把所有li和div的类名都删除然后给当前点击的元素添加类名
4.给每一项li设置自定义属性：目的是让其对应的div元素能够通过myIndex属性值进行相关操作

        var liList = document.querySelectorAll('#box>ul>li');
        var divList = document.querySelectorAll('#box>div');

        for (var i = 0; i < liList.length; i++) {
            liList[i].myIndex = i
            liList[i].onclick = function () {
                for(var k = 0;k<liList.length;k++){ 
                    liList[k].className = '';
                    divList[k].className = '';
                };
                this.className = 'active';
                divList[this.myIndex].className = 'active';
            };
        };

复制代码