显示多个选项卡式内容部分可以通过使用HTML、CSS和JavaScript来实现。以下是一种常见的实现方法:
<ul>
和<li>
标签创建选项卡的导航栏,使用<div>
标签创建选项卡的内容部分。<ul class="tabs">
<li class="active">选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
</ul>
<div class="tab-content">
<div class="tab-pane active">选项卡1的内容</div>
<div class="tab-pane">选项卡2的内容</div>
<div class="tab-pane">选项卡3的内容</div>
</div>
.tabs {
list-style-type: none;
margin: 0;
padding: 0;
}
.tabs li {
display: inline-block;
padding: 10px;
background-color: #f2f2f2;
cursor: pointer;
}
.tabs li.active {
background-color: #ccc;
}
.tab-content {
display: none;
padding: 10px;
}
.tab-content .active {
display: block;
}
const tabs = document.querySelectorAll('.tabs li');
const tabContents = document.querySelectorAll('.tab-content .tab-pane');
tabs.forEach((tab, index) => {
tab.addEventListener('click', () => {
// 移除所有选项卡的活动状态和内容的显示
tabs.forEach((tab) => tab.classList.remove('active'));
tabContents.forEach((content) => content.classList.remove('active'));
// 添加当前选项卡的活动状态和对应内容的显示
tab.classList.add('active');
tabContents[index].classList.add('active');
});
});
这样,当用户点击不同的选项卡时,对应的内容部分会显示出来,实现了多个选项卡式内容部分的显示效果。
腾讯云相关产品和产品介绍链接地址:
数据万象应用书塾直播
第136届广交会企业系列专题培训
技术创作101训练营
腾讯技术创作特训营第二季第2期
腾讯技术开放日
企业创新在线学堂
Elastic 实战工作坊
Elastic 实战工作坊
技术创作101训练营
领取专属 10元无门槛券
手把手带您无忧上云