js实现简单的选项卡~

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/Jackewe/article/details/102690459

##js做一个简易的选项卡

js联动太麻烦 一个简单的选项卡给宁看

---

首先是我的思路↓

思路

        a)先让所有隐藏,再让当前显示出来
        b)涉及到一组一堆 所有 操作用 for循环
        c) 循环里面加事件，事件里面i值不能用
           解决办法:在每一个元素身上添加一个i值

接下来是style部分↓

 #box button.ac{
            background: blue
        }
        #box div{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            display: none; //将其他div隐藏
        }

body部分↓

<div id="box">
        <button class="ac">俺是1</button>
        <button>俺是2</button>
        <button>俺是3</button>
        <div style="display: block">111</div>
        <div>222</div>
        <div>3333</div>
    </div>

又是最重要的js部分了↓

//第一步:window.onload
window.onload=function(){
//第二步:获取dom节点
        var $=item=>document.querySelectorAll(item)
        var But=$("#box button")
        var Div=$("#box div")
        //操作dom节点
    for(var i=0;i<But.length;i++){
        But[i].index=i;//循环里面加事件，事件里面i值不能用,解决方法:在每一个元素身上添加一个i值
        But[i].onclick=function(){
            for(var i=0;i<But.length;i++){
                But[i].className=''
                Div[i].style.display="none"
            }
            this.className="ac"
            Div[this.index].style.display="block"
        }
    }
    }

到这里就没有了！