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

最新推荐文章于 2022-06-16 23:28:51 发布

sunda112

最新推荐文章于 2022-06-16 23:28:51 发布

阅读量7.7k

点赞数 3

分类专栏： JS

本文链接：https://blog.csdn.net/sunling112/article/details/53213814

版权

JS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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

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

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

sunda112

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js,li形式的选项卡，点击显示不同的div

练习了一上午，一直在获取元素上出错误，最终还是弄好了 Home --> *{ margin:0; padding: 0; } #box{ width: 410px; display: block; } ul{ list-style: none; float:
复制链接

扫一扫