js,li形式的选项卡，点击显示不同的div

来源：互联网发布：破解网游的软件编辑：程序博客网时间：2024/06/07 11:51

练习了一上午，一直在获取元素上出错误，最终还是弄好了

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>

<style type="text/css">
*{
margin:0;
padding: 0;
}
#box{
width: 410px;
display: block;
}
ul{
list-style: none;
float: left;
}
ul li{
width: 100px;
border: 2px solid #ccc;
text-align: center;
margin-top: -2px;
height: 50px;
line-height: 50px;
cursor: pointer;
}
#content{
width: 410px;
}
.tab{
width: 410px;
height: 204px;
border: 2px solid #ececec;
display: none;
margin-left: 102px;
}
.hover{
border: 2px solid red;
}
</style>
</head>
<body>
<div style="margin:100px auto;">
<div id="box">
<ul id="ul1">
<li>国际名品</li>
<li>户外秒杀</li>
<li>运动潮流</li>
<li>健身器材</li>
</ul>
</div>

<div id="content">
<div class="tab" style="display:block;">国际大牌国际大牌国际大牌国际大牌国际大牌国际大牌国际大牌国际大牌</div>
<div class="tab"> shedffffffffffffffffffffffffffffff</div>
<div class="tab"> vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv</div>
<div value="000" class="tab"> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
</div>
</div>
<script type="text/javascript">
var lis = document.getElementById("ul1").getElementsByTagName("li");
var divs = document.getElementById("content").getElementsByTagName("div");
for(var i=0; i<lis.length; i++){

lis[i].index = i;

lis[i].onclick = function(){

for(var j=0; j<lis.length; j++){
lis[j].className = "";
}

this.className ="hover";

for(var i=0; i<divs.length; i++){
divs[i].style.display="none";
}

divs[this.index].style.display = "block";

}
}

</script>
</body>
</html>

思路：点击后，第一个循环把所有的li样式都隐藏，然后添加当前选中的li的样式。

第二个循环，把所有的div都隐藏，然后显示点击li的index值和div的index值一致的div块

最外层的循环，就是要不断的点击，，不断的执行下面的循环。。。

0 0