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