如何用JS实现选项卡功能

那么到底要如何实现选项卡的效果呢？我们一起来看一下。

---

总体结构分为两部分：

• 选卡部分
• 内容部分

选卡部分点击时要变色，内容部分要隐藏

代码展示：

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实现选项卡功能的全部流程，当然不止这一种方法，快去多多练习尝试！