<!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>
.tab-cad{
height: 4vh;
}
.tab-cad .ul li{
text-align: center;
}
.tab-cad .text1{
background-color: rgb(115, 189, 199);
color: aliceblue;
width: 15vw;
height: 3vh;
/* border-radius: 30px; */
padding-top:1vh ;
}
.tab-cad ul{
list-style-type: none;
display: flex;
height: 4vh;
align-items: center;
justify-content:space-evenly;
flex-direction: row;
background-color: rgb(241, 241, 138);
}
.tab-nr div{
display: flex;
flex-direction: column;
}
.tab-nr .items{
display: none;
padding-left: 14vw;
padding-top: 3vh;
}
</style>
</head>
<body>
<div class="bj">
<div class="tab-cad">
<ul class="ul">
<li class="text1" index="0">商品介绍</li>
<li index="1">规格与包装</li>
<li index="2">售后保障</li>
<li index="3">商品评价</li>
<li index="4">手机社区</li>
</ul>
</div>
<div class="tab-nr">
<div class="items" style="display:block;" index="0">
<h3>商品介绍内容</h3>
// 图片可以换成自己的
<img src="../assets/2.jpg" alt="" style="width: 60%;">
</div>
<div class="items" index="1">
<h3>规格与包装内容</h3>
<img src="../assets/彼得兔.jpg" alt="" style="width: 60%;">
</div>
<div class="items" index="2">
<h3>售后保障内容</h3>
<img src="../assets/海边少年.jpg" alt="" style="width: 60%;">
</div>
<div class="items" index="3">
<h3> 商品评价内容</h3>
<img src="../assets/2.jpg" alt="" style="width: 60%;">
</div>
<div class="items" index="4">
<h3> 手机社区内容</h3>
<img src="../assets/彼得兔.jpg" alt="" style="width: 60%;">
</div>
</div>
<div class="sh">
</div>
<div class="pj">
</div>
</div>
<script>
//1.获取元素
var tab_cad = document.querySelector('.tab-cad');//获取tab-cad
var list = tab_cad.querySelectorAll('li');//获取li值
var items = document.querySelectorAll('.items');//获取items
//2.for循环绑定点击事件
for(var i = 0;i<list.length;i++){
//开始给五个小li设置索引号
//setAttribute(name,value),增加一个指定名称和新属性,或者把一个现有属性设定为指定的值
//保存数据然后用getAttribute()方法来取
list[i].setAttribute('index',i);//5个li的索引,
list[i].onclick = function(){
//排他思想:干掉所有人留下我自己
for(var i = 0;i<list.length;i++){
list[i].className = '';
}
//不点击的时候就隐藏
for(var i = 0;i<items.length;i++){
items[i].style.display = 'none';
}
//留下我自己,css点击改变样式
this.className = 'text1';
//2.下面的显示内容模块(点击哪一个list对应显示相应内容,给li添加自定义属性)
var index = this.getAttribute('index');
// console.log(index);
items[index].style.display = 'block';//点击显示对应卡
}
}
</script>
</body>
</html>