Tab切换

作者: 简奢程序媛 | 来源:发表于2018-11-08 22:50 被阅读0次

<ul class="btn">

        <li class="cur">1</li>

        <li>2</li>

        <li>3</li>

    </ul>

    <div class="clear"></div>

    <div class="box">

        <div style="display:block">1</div>

        <div>2</div>

        <div>3</div>

    </div>

    <script>

    var btns=document.querySelectorAll('.btn li');

    var boxs=document.querySelectorAll('.box div');

    var curIndex=0;

    for(var i=0;i<btns.length;i++){

        btns[i].index=i;

        btns[i].onclick=function(){

            boxs[this.index].style.display='block';

            boxs[curIndex].style.display='none';

            this.className="cur";

            btns[curIndex].className="";

            curIndex=this.index;

        }

    }

    </script>

相关文章

网友评论

      本文标题:Tab切换

      本文链接:https://www.haomeiwen.com/subject/bamgxqtx.html