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