<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
/*清除无序列表黑点*/
list-style: none;
}
.containter{
width: 300px;
height: 300px;
border: 1px solid #999;
/*多余部分隐藏*/
overflow: hidden;
}
.items{
width: 300px;
/*弹性盒子*/
display: flex;
float: left;
font-size: 15px;
}
.item{
/*均等划分每一个盒子*/
flex: 1;
float: left;
font-size: 15px;
text-align: center;
}
.box{
text-align: center;
/*行高*/
line-height: 280px;
}
</style>
</head>
<body>
<div class="containter">
<ul class="items">
<li class="item">第一项</li>
<li class="item">第二项</li>
<li class="item">第三项</li>
<li class="item">第四项</li>
<li class="item">第五项</li>
</ul>
<div class="box">第一项</div>
<div class="box">第二项</div>
<div class="box">第三项</div>
<div class="box">第四项</div>
<div class="box">第五项</div>
</div>
</body>
<script type="text/javascript">
// 获取每个Li的一个数组元素
var item= document.getElementsByClassName("items")[0].getElementsByTagName("li")
// 获得div的一个数组元素
var box= document.getElementsByClassName("box");
for (var i = 0;i<item.length; i++) {
// 使用this获得当前元素
item[i].index=i;
// 每个li的点击事件
item[i].onclick = function(){
for (var j = 0;j<box.length ;j++) {0
// 点击之后实现div内容的隐藏
box[j].style.display="none";
// 点击之后实现每个Li的背景颜色的改变
item[j].style.background="#fff";
}
// 实现当前对象的背景颜色的改变
this.style.background="pink";
// 实现div内容的显示
box[this.index].style.display="block";
}
};
</script>
</html>
用js写选项卡
最新推荐文章于 2022-02-11 09:42:55 发布