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

4.7
(3)

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

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

标签页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代码,每一个部分都说明了用在哪里,也不做过多解释。

标签页预览

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

共计3人评分,平均4.7

到目前为止还没有投票~

很抱歉,这篇文章对您没有用!

让我们改善这篇文章!

告诉我们我们如何改善这篇文章?

文章目录

原创文章,作者:古哥,转载需经过作者授权同意,并附上原文链接:https://iymark.com/articles/6183.html

(0)
微信公众号
古哥的头像古哥管理团队
上一篇 2023年04月18日 20:02
下一篇 2023年04月20日 23:20

你可能感兴趣的文章

发表回复

登录后才能评论
微信小程序
微信公众号