Tab切换

<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>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容