设置激活的CSS选项卡菜单可以通过以下步骤实现:
<div class="tab-container">
<a href="#tab1" class="tab-link active">Tab 1</a>
<a href="#tab2" class="tab-link">Tab 2</a>
<a href="#tab3" class="tab-link">Tab 3</a>
<div id="tab1" class="tab-content active">
Content for Tab 1
</div>
<div id="tab2" class="tab-content">
Content for Tab 2
</div>
<div id="tab3" class="tab-content">
Content for Tab 3
</div>
</div>
.tab-link {
display: inline-block;
padding: 10px;
background-color: #ccc;
color: #000;
text-decoration: none;
}
.tab-link.active {
background-color: #f00;
color: #fff;
}
.tab-content {
display: none;
padding: 10px;
}
.tab-content.active {
display: block;
}
const tabLinks = document.querySelectorAll('.tab-link');
const tabContents = document.querySelectorAll('.tab-content');
tabLinks.forEach((link) => {
link.addEventListener('click', (e) => {
e.preventDefault();
// 移除所有选项卡的激活状态
tabLinks.forEach((link) => {
link.classList.remove('active');
});
// 隐藏所有选项卡的内容
tabContents.forEach((content) => {
content.classList.remove('active');
});
// 设置当前选项卡为激活状态
const selectedTab = document.querySelector(link.getAttribute('href'));
link.classList.add('active');
selectedTab.classList.add('active');
});
});
通过以上步骤,就可以实现一个带有激活状态的CSS选项卡菜单。用户点击不同的选项卡标题时,对应的内容会显示出来,并且激活状态的选项卡标题会有不同的样式。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云