JS 选项卡实现

什么是选项卡？

选项卡是一种用户界面元素，允许用户在多个选项（或页面）之间切换，而无需重新加载整个页面。

如何用 JS 实现选项卡？

步骤 1：HTML 结构

首先，你需要创建一个 HTML 结构来表示选项卡。这包括一个容器元素、选项卡按钮和选项卡内容面板。

<p 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>  <p class="tab-content" data-tab="tab1">选项卡 1 内容</p>  <p class="tab-content" data-tab="tab2">选项卡 2 内容</p>  <p class="tab-content" data-tab="tab3">选项卡 3 内容</p></p>

步骤 2：JavaScript 逻辑

接下来，使用 JavaScript 来处理选项卡逻辑。

// 获取选项卡容器元素const tabs = document.getElementById("tabs");// 获取选项卡按钮元素const tabButtons = tabs.querySelectorAll(".tab-button");// 获取选项卡内容面板元素const tabContents = tabs.querySelectorAll(".tab-content");// 添加事件监听器以处理选项卡按钮点击事件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;}