通过JS和CSS实现标签页点击切换的功能

最近，写了个WordPress插件，用于对接QAPress问答插件的自动问答功能。随着一步步更新，目前已经实现了自动提问，自动作答，批量生成问题。感兴趣的，可以参考文章：《WordPress自动问答插件，对接OpenAi ChatGPT》。越更新设置界面越庞大，所以就加入了标签页切换功能。本文，也就把这种方法分享给大家，互相参考学习。

标签页Html结构

首先，要想JS和CSS达到标签页点击切换标签的功能，必须要一个合理的HTML代码。我所使用的HTML代码结果如下：

<div class="wrap">
	<h1>自动问答设置</h1>
	<div id="qa-gpt-tabs">
		<ul class=tab-option>
			<li class="tab-item active"><a href="#tab1">API链接测试</a></li>
			<li class="tab-item"><a href="#tab2">自动作答设置</a></li>
			<li class="tab-item"><a href="#tab3">自动提问设置</a></li>
		</ul>
		<div class="tab-content active" id="tab1">
			标签一的内容
		</div>
		<div class="tab-content" id="tab2">
			标签二的内容
		</div>
		<div class="tab-content" id="tab3">
			标签三的内容
		</div>
	</div>
</div>

如上，两个active表示设置默认标签为标签一。

JavaScript标签页代码

与HTML搭配的JavaScript代码，如下：

// 获取选项卡和内容区域的 DOM 元素
const tabs = document.querySelectorAll('#qa-gpt-tabs .tab-option li');
const tabContents = document.querySelectorAll('#qa-gpt-tabs .tab-content');
// 遍历所有选项卡，为其绑定点击事件
tabs.forEach((tab, index) => {
	tab.addEventListener('click', (e) => {
		e.preventDefault(); // 阻止默认链接跳转行为
		// 移除所有选项卡的 active 样式，并将当前选项卡添加 active 样式
		tabs.forEach((t) => t.classList.remove('active'));
		tab.classList.add('active');
		// 获取当前活动内容区域和下一个内容区域
		const currentContent = document.querySelector('#qa-gpt-tabs .tab-content.active');
		const nextContent = tabContents[index];
		// 设置当前活动内容区域的 opacity 为 0，并通过 setTimeout 延迟一定时间后将下一个内容区域的 opacity 设置为 1
		currentContent.style.opacity = 0;
		setTimeout(() => {
			currentContent.classList.remove('active');
			nextContent.classList.add('active');
			nextContent.style.opacity = 1;
		}, 150);
		// 切换选项卡时平滑滚动页面到顶部
		window.scrollTo({
			top: 0,
			behavior: 'smooth',
		});
	});
});

所有代码我都做了解释，这里就不过多讲解了。

CSS标签页代码

/* 选项卡整体样式
----------------------------------*/
#qa-gpt-tabs {
	width: 100%;
	margin: 0 auto;
	margin-top: 20px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 5px;
}

/* 选项卡导航链接样式
----------------------------------*/
#qa-gpt-tabs .tab-option {
	list-style-type: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #ddd;
	background: #f2f2f2;
}
.tab-option .tab-item:hover {
	background: #ddd;
}
.tab-item.active {
	background: #3858e9!important;
}
#qa-gpt-tabs .tab-item {
	display: inline-block;
	margin: 0;
}
.tab-item.active a{
	color: #fff!important;
}
#qa-gpt-tabs .tab-item a {
	display: block;
	padding: 10px 15px;
	font-size: 16px;
	font-weight: bold;
	color: #333;
	text-transform: uppercase;
	text-decoration: none;
	border-right: 1px solid #ddd;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
#qa-gpt-tabs .tab-item:last-child a {
	border-right: none;
}
#qa-gpt-tabs .tab-item a.active {
	background-color: #fff;
	border-bottom: 1px solid #fff;
	cursor: default;
}

/* 选项卡内容区域样式
----------------------------------*/
#qa-gpt-tabs .tab-content {
	display: none;
	padding: 20px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-top: none;
	
}
#qa-gpt-tabs .tab-content.active {
	display: block;
}

如上是所用到的所有CSS代码，每一个部分都说明了用在哪里，也不做过多解释。