开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天
写一个tab选项卡的样式，先做一个这样的框架出来，我们的目标就是点击头部（热卖、精品、推荐）以后其背景颜色会进行改变，并且底下的内容显示框会显示不同的内容
此为css样式
.container {
width: 600px;
height: 400px;
border: 10px solid #333;
margin: 30px auto;
display: flex;
flex-direction: column;
}
.header {
height: 40px;
display: flex;
line-height: 40px;
}
.header div {
flex: 1;
background-color: hotpink;
text-align: center;
font-size: 36px;
color: white;
}
.header .active {
background-color: orange;
}
.content {
display: none;
}
此为body代码
<body>
<div class="container">
<div class="header">
<div class="active">热卖</div>
<div>精品</div>
<div>推荐</div>
</div>
<div class="body">
<div class="content" style="display: block;">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>
</div>
</body>
代码分析
一、先让每一个导航栏都设置一个点击事件
二、事件相关
1、点击到导航栏时，导航栏的背景颜色会进行改变（也就是样式发生改变）所以我们只需要给所点击到的导航栏添加一个特殊的样式就行了（这里我在写css样式时已经有了一个active的标签，所以我们直接在所点击的导航栏上创建一个active标签即可），这里我们利用排他思想，不管active在谁身上，我们直接将所有active标签移出，然后再在当前所点击的导航栏上添加样式。
2、改变内容改变，同样也用排他思想，先将所有的内容写入内容框（三个内容存在于不同的div）不管谁先显示，直接将所有的正文div全部隐藏，再通过导航将对应的正文解除隐藏
三、代码实现
1、获取到导航栏和内容栏的dom对象
var headers = document.querySelectorAll('.header>div');
var bodys = document.querySelectorAll('.body>.content');
2、用一个for循环给所有的导航栏内容加一个自定义标签
for (var i = 0; i < headers.length; i++) {
headers[i].setAttribute('data-index', i);
}
3、给每一个元素绑定一个点击事件（用监听事件）
headers[i].onclick = function () {
// 移除导航上所有的active样式
for (var j = 0; j < headers.length; j++) {
headers[j].removeAttribute('class');
}
// 给当前点击的导航添加样式
this.setAttribute('class', 'active');
// 获取到当前点击的导航的序号
var index = this.getAttribute('data-index');
// 将所有的正文隐藏
for (var k = 0; k < bodys.length; k++) {
bodys[k].style.display = 'none';
}
// 将当前点击对应的正文显示
bodys[index].style.display = 'block';
}
四、完整的js代码
<script>
var headers = document.querySelectorAll('.header>div');
var bodys = document.querySelectorAll('.body>.content');
for (var i = 0; i < headers.length; i++) {
// 增加自定义的属性记录序号
headers[i].setAttribute('data-index', i);
// 每一个元素绑定事件
headers[i].onclick = function () {
// 移除导航上所有的active样式
for (var j = 0; j < headers.length; j++) {
headers[j].removeAttribute('class');
}
// 当前点击的导航添加样式
this.setAttribute('class', 'active');
// 获取到当前点击的导航的序号
var index = this.getAttribute('data-index');
// 将所有的正文隐藏
for (var k = 0; k < bodys.length; k++) {
bodys[k].style.display = 'none';
}
// 将当前点击对应的正文显示
bodys[index].style.display = 'block';
}
}
</script>
