那么到底要如何实现选项卡的效果呢？我们一起来看一下。
总体结构分为两部分：
- 选卡部分
- 内容部分
选卡部分点击时要变色，内容部分要隐藏
代码展示：
HTML代码：
<!-- 选项卡 --> <div class="select"> <span style="background-color: hotpink;">选卡一</span> <span style="background-color: lightpink;">选卡二</span> <span style="background-color: lightpink;">选卡三</span> </div> <!-- 内容区 --> <div class="select_content"> <span class="top" style="background-color: coral;">内容一</span> <span class="top_one" style="background-color: chocolate;">内容二</span> <span class="top_two" style="background-color: brown;">内容三</span> </div>
给选项卡和内容区设置它的初始背景颜色，方便区分点击时显示的颜色。
结构写完之后当然要添加样式了，使页面变得更加美观！
CSS代码：
*{ margin: 0; padding: 0; } .select{ display: flex; width: 100%; } .select span{ width: 70px; height: 50px; display: block; text-align: center; margin: 15px 18px; } .select_content{ width: 300px; height: 500px; } .select_content span{ display: block; width: 300px; height: 200px; margin: 5px 10px; color: #fff; text-align: center; } .select_content .top_one{ display: none; } .select_content .top_two{ display: none; }
把内容一内容二隐藏起来。
JS代码：
// // 获取选项卡那个<div> let one = document.getElementsByClassName("select")[0]; // // console.log(box); // // 获取内容 let two = document.getElementsByClassName("select_content")[0]; // // console.log(six); // // 获取select的子元素span let first = one.children; // // console.log(first[1]); // // 获取select_content的子元素span let second = two.children; // // console.log(second); for (let i = 0; i < first.length; i++) { first[i].onclick = function() { for (let k = 0; k < second.length; k++) { second[k].style.display = 'none'; first[k].style.backgroundColor = "lightpink"; } second[i].style.display = 'block'; first[i].style.backgroundColor = "hotpink"; } }
先执行循环内容区，再执行选卡并添加点击事件，点击选卡时它的背景颜色会改变，另外两个内容区会隐藏。
以上就是用JS实现选项卡功能的全部流程，当然不止这一种方法，快去多多练习尝试！
