原生js实现简单tab切换

结构

 <div id="box">
        <ul id="oul">
            <li class="uli">1</li>
            <li class="uli">2</li>
            <li class="uli">3</li>
        </ul>
        <div id="con">
            <div id="con1" style="display: block;">第一个</div>
            <div id="con1"style="background-color: yellow;">第二个</div>
            <div id="con1" style="background-color:green;">第三个</div>
        </div>
    </div>

css部分

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        #box {
            width: 600px;
            height: 300px;
            /* border: 1px solid #000; */
            margin:0 auto;
        }
        
        #box>ul {
            width: 600px;
            height: 50px;
            list-style: none;
        }
        #box>ul>li {
            float: left;
            width: 198px;
            height: 48px;
            border: 1px solid cyan;
        }
        #con{
            width: 600px;
            height: 250px;
            /* border: 1px solid blue; */
        }
        #con1{
            width: 600px;
            height: 250px;
            background-color:rebeccapurple;
            display: none;
        }
    </style>

js部分

<script>
        //获取元素
        var ali=document.getElementById('oul').children;
        var acon=document.getElementById('con').children;

        for(var i=0;i<acon.length;i++){
            //存储i的值  相当于oul的第一个子元素等于con的第一个子元素  (通俗来说就是一一对应)
            ali[i].index=i;
            //循环设置点击事件
            ali[i].onclick=function(){
                for(var i=0;i<acon.length;i++){
                 acon[i].style.display="none";
                }
                //this指的是事件前的对象  (ali[i].index=i)
                acon[this.index].style.display='block';
            }
        }
    </script>
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页