分析:tab栏切换有两个大的模块。
上模块选项卡,点击某个,当前这个底色会是红色,其余不变(排他思想)修改类名的方式。
下面的模块内容,会跟随上面的选项卡变化,所以下面模块变化点击写到事件里面。
规律:下面的模块显示内容和上面的选项卡一一对应,相匹配
思路:给上面的tab_list里面的小li添加自定义属性,属性值从0开始编号
当我们点击tab_list里面的某个小li,让tab_con里面对应的内容显示,其余隐藏(排他思想)
<!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_list {
height: 39px;
}
li {
list-style: none;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: red;
color: #fff;
}
.item {
display: none;
}
</style>
</head>
<body>
<div class="table">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格和包装</li>
<li>售后保障</li>
<li>商品评价</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block">商品介绍模块</div>
<div class="item">规格和包装模块</div>
<div class="item">售后保障某块</div>
<div class="item">商品评价模块</div>
<div class="item">手机社区模块</div>
</div>
</div>
<script>
/* 1、上模块选项卡,点击某一个选项,当前这个底色会变成红色字体为白色其余不变 ---> (排他思想)修改类名的方式*/
//获取元素
var tab_list = document.querySelector(".tab_list");
var lis = tab_list.querySelectorAll("li");
var items = document.querySelectorAll(".item");
//for循环绑定点击事件
for (var i = 0; i < lis.length; i++) {
//开始给5个小li设置索引号
lis[i].setAttribute("index", i);
lis[i].onclick = function() {
//干掉所有人,其余的li清楚class这个类
for (var i = 0; i < lis.length; i++) {
lis[i].className = "";
}
//留下我自己
this.className = "current";
/* 2、下面的显示内容模块 */
var index = this.getAttribute("index");
for (var j = 0; j < items.length; j++) {
//干掉所有人,让其余的item 这些div隐藏
items[j].style.display = "none";
}
//留下我自己,让对应的item显示出来
items[index].style.display = "block";
};
}
</script>
</body>
</html>