JS笔记(4) 选项卡案例-白红宇

HTNL+CSS基础结构

复制代码


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

一、方案一：定点清除

思路：

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