tab切换
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
网友评论