<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #333;
}
li {
float: left;
height: 50px;
width: 120px;
line-height: 50px;
text-align: center;
list-style: none;
background: #bdb9b9;
}
.box {
margin: 100px auto;
width: 600px;
height: 300px;
background: rgb(222, 205, 238);
}
.a {
position: absolute;
top: 50px;
left: 0;
display: block;
height: 250px;
width: 600px;
background: pink;
}
.b {
position: absolute;
top: 50px;
left: 0;
display: none;
height: 250px;
width: 600px;
background: orange;
}
.c {
position: absolute;
top: 50px;
left: 0;
display: none;
height: 250px;
width: 600px;
background: yellow;
}
.d {
position: absolute;
top: 50px;
left: 0;
display: none;
height: 250px;
width: 600px;
background: green;
}
.e {
position: absolute;
top: 50px;
left: 0;
display: none;
height: 250px;
width: 600px;
background: blue;
}
.dianjixiaoguo {
background: red;
}
.dianjixiaoguo>a{
color: white;
}
.nav>ul>li a {
display: block;
}
.banner {
position: relative;
}
</style>
<body>
<!-- box -->
<div class="box">
<!-- nav -->
<div class="nav">
<ul>
<li class="hot"><a href="#">商品介绍</a> </li>
<li><a href="#">规格与包装</a></li>
<li><a href="#">售后保障</a></li>
<li><a href="#">商品好评</a></li>
<li><a href="#">本店好评商品</a></li>
</ul>
</div>
<!-- banner -->
<div class="banner">
<div class="a">111</div>
<div class="b">222</div>
<div class="c">333</div>
<div class="d">444</div>
<div class="e">555</div>
</div>
</div>
<script>
var li = document.querySelectorAll('li');
var banner = document.querySelector('.banner');
var div = document.querySelectorAll('.banner>div')
for (var i = 0; i < li.length; i++) {
li[i].setAttribute('index', i)
li[i].onclick = function () {
for (var j = 0; j < li.length; j++) {
li[j].className = ''
div[j].style.display = 'none'
}
this.className = 'dianjixiaoguo'
var num = this.getAttribute('index')
div[num].style.display = 'block'
}
}
</script>
</body>
</html>
选项卡(排他思想,自定义属性)
最新推荐文章于 2024-08-18 11:06:22 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)