tab栏切换+全选反选

tab栏切换

一、css样式写

<div class="title">
        <button class="bg">按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
    </div>
    <div class="box">
        <div class="show">内容1</div>
        <div class="hide">内容2</div>
        <div class="hide">内容3</div>
    </div>

第一种方法：

 let btns = document.querySelectorAll('.title button');
        let divs = document.querySelectorAll('.box div');


        // 第一个for循环：给button添加点击事件并添加自定义属性
        for (let i = 0; i < btns.length; i++) {
   
            // 定义自定义属性
            btns[i].index = i;
            btns[i].onclick = function() {
   
                //第二个for循环： 清空所有
                for (let j = 0; j < btns.length; j++) {
   
                    btns[j].className = '';
                    divs[j].className = 'hide';
                }
                // 给自己添加样式
                this.className = 'bg';
                // 取自定义属性
                divs[this.index].className = 'show';
            }
        }

第二种方法：

let btns = document.querySelectorAll('.title button');
        let divs = document.querySelectorAll('.box div');
  btns.forEach((item, a) => {
   
            // console.log(item, index);
            btns