<!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>
<style>
* {
margin: 0;
padding: 0;
}
.big {
width: 1000px;
height: 500px;
margin: 100px auto;
background-color: pink;
}
.big .one {
width: 1000px;
height: 50px;
margin-top: 20px;
background-color: #eef1ee;
}
.item {
float: left;
height: 50px;
padding: 0 30px;
line-height: 50px;
font-size: 15px;
color: #868b88;
background-color: #eef1ee;
cursor: default;
}
.two div {
display: none;
}
</style>
</head>
<body>
<div class="big">
<div class="one">
<div class="item">商品介绍</div>
<div class="item">规格与包装</div>
<div class="item">售后保障</div>
<div class="item">商品评价(5000)</div>
<div class="item">手机社区</div>
</div>
<div class="two">
<div class="a" style="display:block;">商品介绍</div>
<div class="b">规格与包装</div>
<div class="c">售后保障</div>
<div class="d">商品评价(5000)</div>
<div class="e">手机社区</div>
</div>
</div>
</body>
<script>
var one = document.querySelector('.one');
var items = one.querySelectorAll('div');
var two = document.querySelector('.two').querySelectorAll('div');
for (var i = 0; i < items.length; i++) {
items[i].setAttribute('index', i);
items[i].onclick = function () {
for (var j = 0; j < items.length; j++) {
items[j].style.backgroundColor = '';
}
this.style.backgroundColor = 'red';
var index = this.getAttribute('index');
for (var i = 0; i < two.length; i++) {
two[i].style.display = 'none';
}
two[index].style.display = 'block';
}
}
</script>
</html>
tab栏切换制作(框架)
最新推荐文章于 2024-05-05 12:58:21 发布