选项卡是一种用户界面元素,允许在多选项间切换,无需重新加载页面。js 实现选项卡需要:1) 创建 html 结构,包括容器、按钮和内容面板;2) 使用 javascript 处理选项卡逻辑,监听点击事件切换激活状态;3) 添加 css 样式设置外观。
JS 选项卡实现
什么是选项卡?
选项卡是一种用户界面元素,允许用户在多个选项(或页面)之间切换,而无需重新加载整个页面。
如何用 JS 实现选项卡?
步骤 1:HTML 结构
首先,你需要创建一个 HTML 结构来表示选项卡。这包括一个容器元素、选项卡按钮和选项卡内容面板。
<div id="tabs">
<button class="tab-button" data-tab="tab1">选项卡 1</button>
<button class="tab-button" data-tab="tab2">选项卡 2</button>
<button class="tab-button" data-tab="tab3">选项卡 3</button>
<div class="tab-content" data-tab="tab1">选项卡 1 内容</div>
<div class="tab-content" data-tab="tab2">选项卡 2 内容</div>
<div class="tab-content" data-tab="tab3">选项卡 3 内容</div>
</div>
步骤 2:JavaScript 逻辑
接下来,使用 JavaScript 来处理选项卡逻辑。
// 获取选项卡容器元素
const tabs = document.getElementById("tabs");
// 获取选项卡按钮元素
const tabButtons = tabs.querySelectorAll(".tab-button");
// 获取选项卡内容面板元素
const tabContents = tabs.querySelectorAll(".tab-content");
// 添加事件监听器以处理选项卡按钮<a style="color:#f60; text-decoration:underline;" href="https://www.php.cn/zt/39702.html" target="_blank">点击事件</a>
tabButtons.forEach((button) => {
button.addEventListener("click", (e) => {
// 获取选项卡数据属性值
const tab = button.dataset.tab;
// 隐藏所有选项卡按钮
tabButtons.forEach((btn) => {
btn.classList.remove("active");
});
// 隐藏所有选项卡内容面板
tabContents.forEach((content) => {
content.classList.remove("active");
});
// 激活当前选项卡按钮
button.classList.add("active");
// 激活当前选项卡内容面板
const content = tabs.querySelector(`.tab-content[data-tab="${tab}"]`);
content.classList.add("active");
});
});
步骤 3:样式
最后,添加 CSS 样式以设置选项卡的外观。
#tabs {
display: flex;
}
.tab-button {
padding: 10px;
margin: 10px;
border: 1px solid #ccc;
background-color: #fff;
cursor: pointer;
}
.tab-button.active {
background-color: #ccc;
}
.tab-content {
display: none;
padding: 10px;
}
.tab-content.active {
display: block;
}