切换选项卡反应 - JavaScript

在网页和移动端应用程序中，常使用选项卡（也称为标签）作为用户界面的一种方式。用户点击选项卡中的一个标签时，应该只显示与该标签相关联的内容。

本文将介绍如何使用 JavaScript 实现切换选项卡反应。

HTML 结构

我们假设有一个包含选项卡的 HTML 页面。以下是一个简单的示例：

<div class="tabs">
  <div class="tab">
    <button class="tablinks" onclick="openTab(event, 'tab1')">Tab 1</button>
  </div>
  <div class="tab">
    <button class="tablinks" onclick="openTab(event, 'tab2')">Tab 2</button>
  </div>
  <div class="tab">
    <button class="tablinks" onclick="openTab(event, 'tab3')">Tab 3</button>
  </div>
</div>

<div id="tab1" class="tabcontent">
  <h3>Tab 1</h3>
  <p>This is tab 1 content.</p>
</div>

<div id="tab2" class="tabcontent">
  <h3>Tab 2</h3>
  <p>This is tab 2 content.</p>
</div>

<div id="tab3" class="tabcontent">
  <h3>Tab 3</h3>
  <p>This is tab 3 content.</p>
</div>

在该示例中，我们有三个选项卡按钮，每个按钮的 onclick 属性被设置为 openTab() 函数，并传递一个事件对象和与该按钮对应的标签 ID。

在页面底部，我们有三个带有不同 ID 的 div 元素，每个元素包含一个标题和内容。

为了在初始化页面时默认显示第一个标签，我们将第一个标签的 class 属性设置为 active，第一个标签的内容 div 元素的 style.display 属性设置为 block，其余的内容 div 元素的 style.display 属性设置为 none。

JavaScript 代码

要完成选项卡切换的反应，我们需要编写 JavaScript 代码以实现 openTab() 函数。该函数应根据所选标签的 ID 显示相应的内容，同时隐藏不相关的内容。

以下是完整的 JavaScript 代码：

function openTab(evt, tabId) {
  // 获取所有含有 class="tabcontent" 的元素，并隐藏它们
  const tabs = document.getElementsByClassName('tabcontent');
  for (let i = 0; i < tabs.length; i++) {
    tabs[i].style.display = 'none';
  }
  // 获取所有含有 class="tablinks" 的元素，并从它们的 class 中删除 "active" 类
  const tablinks = document.getElementsByClassName('tablinks');
  for (let i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(' active', '');
  }
  // 显示所选标签的内容 div 元素，并向所选标签的按钮添加 "active" 类
  const tabContent = document.getElementById(tabId);
  tabContent.style.display = 'block';
  evt.currentTarget.className += ' active';
}

// 在页面初始化时，显示第一个标签的内容
document.getElementById('tab1').style.display = 'block';
document.getElementsByClassName('tablinks')[0].className += ' active';

该函数包括以下步骤：

1. 获取所有具有 class="tabcontent" 的元素，并将它们的 style.display 属性设置为 none，从而隐藏它们。
2. 获取所有具有 class="tablinks" 的元素，并从它们的 class 中删除 active 类，这样它们就不再是“选定”状态。
3. 显示所选的标签内容 div 元素，并将选定标签的按钮添加 active 类，这样它就作为选定状态。

最后，我们在页面初始化时默认显示第一个标签的内容，并将第一个标签的按钮设置为“选定”。

结论

现在，我们已经学会如何使用 JavaScript 创建选项卡，并在用户点击标签时自动显示和隐藏正确的内容。此代码可扩展到多个选项卡项和内容面板，以提供更多信息和用户互动。