tab切换

作者: jiaomeichen | 来源:发表于2018-03-13 11:28 被阅读0次
    html:
       <b id="box">
            <div class="active">11111111111111111111111111111111111</div>
            <div>22222222222222222222222222222222222</div>
            <div>33333333333333333333333333333333333</div>
        </b>
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
    css:
        li{ cursor: pointer; }
        b div{display: none; }
       .active{ display: block; }
    jq:
           $("ul li").click(function () {
                var index = $(this).index();
                $("b div").eq(index).addClass("active").siblings().removeClass("active");
            })
    js:
      var oLi = document.getElementsByTagName("li");
                var oDiv = document.getElementsByTagName("div");
                for (var i = 0;i < oLi.length;i++) {
                    oLi[i].index=i;
                    oLi[i].onclick = function(){
                        for (var j = 0;j < oDiv.length;j++) {
                            oDiv[j].className="";
                        }
                        oDiv[this.index].className = "active";
                    }
                }
    

    相关文章

      网友评论

          本文标题:tab切换

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