JS实现选项卡的切换
选项卡的内容切换
·
选项卡的HTML结构部分如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="tab" class="tab">
<ul id='ul'>
<li class="active">选项1</li>
<!-- 选项1为默认选中状态 -->
<li>选项2</li>
<li>选项3</li>
</ul>
<div class="cont" style="display: block;">我是内容1</div>
<!-- 内容一为默认显示状态，其他内容均隐藏 -->
<div class="cont">我是内容2</div>
<div class="cont">我是内容3</div>
</div>
</body>
</html>
此时代码如下结果如下：
CSS代码部分如下，引用时需要将其引入HTML文件。
* {
margin: 0;
padding: 0;
list-style: none;
}
.tab {
width: 300px;
height: 300px;
border: 2px solid red;
margin: 100px auto;
position: relative;
}
.tab ul {
overflow: hidden;
border-bottom: 2px solid #ccc;
}
.tab ul li {
height: 30px;
line-height: 30px;
float: left;
background-color: skyblue;
padding: 0 10px;
margin: 0 10px;
}
.tab .cont {
width: 100%;
height: 100%;
position: absolute;
display: none;/*令选项卡内容隐藏*/
}
/*选项卡被选择状态的class类*/
.active {
color: red;
}此时代码运行结果如下：
需求是点击选项卡，选项卡变为选择状态，并显示相关内容。
而其他选项卡为未被选中状态，其内容隐藏。
完整的JS代码如下，引用时需要将JS代码段放进在body结构内，并置于HTML元素之后。
<script type="text/javascript">
var otab=document.getElementById('tab');
var ali=document.getElementsByTagName('li');
//获取选项卡数组
var acont=document.getElementsByClassName('cont');
//获取选项卡相关内容的数组
//遍历选项卡数组
for(var i =0 ; i < ali.length ; i++){
ali[i].index=i;
ali[i].onclick=function(){
//此处的内部for循环，作用为：
//使得之前被选中的选项卡取消选中
//使得之前显示的选项卡内容全部隐藏display为none
//实现不会有两个选项卡同时显示
for(var j=0;j<ali.length;j++ ){
ali[j].className="";
acont[j].style.display='none';
}
//当i项遇到点击事件时，i项选项卡为avtive选择状态，其内容为block显示状态
this.className="active";
acont[this.index].style.display="block";
}
}
</script>最后结果可以实现选项卡的切换：
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
4
0- 0
已为社区贡献2条内容
所有评论(0)