制作高级选项卡可以通过JavaScript来实现。下面是一种实现高级选项卡的方法:
<div class="tabs">
<ul class="tab-titles">
<li class="active" data-tab="tab1">选项卡1</li>
<li data-tab="tab2">选项卡2</li>
<li data-tab="tab3">选项卡3</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-item active">选项卡1的内容</div>
<div id="tab2" class="tab-item">选项卡2的内容</div>
<div id="tab3" class="tab-item">选项卡3的内容</div>
</div>
</div>
.tabs {
border: 1px solid #ccc;
border-radius: 4px;
overflow: hidden;
}
.tab-titles {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.tab-titles li {
cursor: pointer;
padding: 10px;
background: #f0f0f0;
flex: 1;
text-align: center;
}
.tab-titles li.active {
background: #ccc;
}
.tab-item {
display: none;
padding: 20px;
}
.tab-item.active {
display: block;
}
// 获取选项卡标题和内容的元素
const tabTitles = document.querySelectorAll('.tab-titles li');
const tabItems = document.querySelectorAll('.tab-item');
// 添加选项卡切换事件
tabTitles.forEach((title) => {
title.addEventListener('click', () => {
const tabId = title.getAttribute('data-tab');
// 移除所有选项卡标题的激活状态
tabTitles.forEach((title) => {
title.classList.remove('active');
});
// 移除所有选项卡内容的激活状态
tabItems.forEach((item) => {
item.classList.remove('active');
});
// 添加当前选项卡标题的激活状态
title.classList.add('active');
// 显示当前选项卡内容
document.getElementById(tabId).classList.add('active');
});
});
以上代码将实现一个基本的选项卡效果,点击选项卡标题时,对应的内容将显示出来。
推荐腾讯云的产品:腾讯云服务器(云服务器ECS),腾讯云函数(云函数SCF),腾讯云数据库(云数据库CDB),腾讯云对象存储(对象存储COS),腾讯云CDN(内容分发网络CDN)。
腾讯云产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云