在 HTML 中创建包含不同内容的选项卡

选项卡是一种常见的 Web 设计元素，它允许用户在同一个页面中使用不同的标签页来查看相关内容。在本文中，我们将介绍如何在 HTML 中创建包含不同内容的选项卡。

HTML 结构

我们可以使用 HTML 和 CSS 来创建选项卡。选项卡主要由两个部分组成：标签部分和内容部分。标签部分通常是一个列表，每个列表项代表一个选项卡。而内容部分则是一个容器，用于放置每个选项卡对应的内容。

以下是一个基本的选项卡 HTML 结构示例：

<div class="tabs">
  <ul class="tabs-nav">
    <li class="active"><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
  </ul>
  <div class="tabs-content">
    <div id="tab-1" class="tab-pane active">
      <p>Tab 1 Content Goes Here</p>
    </div>
    <div id="tab-2" class="tab-pane">
      <p>Tab 2 Content Goes Here</p>
    </div>
    <div id="tab-3" class="tab-pane">
      <p>Tab 3 Content Goes Here</p>
    </div>
  </div>
</div>

代码解析：

• .tabs 是包含整个选项卡的容器。
• .tabs-nav 是一个无序列表，用于放置每个选项卡的标签。
• .tabs-nav li 则代表每个选项卡的标签项。
• .tabs-content 是一个容器，用于放置每个选项卡对应的内容。
• .tab-pane 是一个内容区域（用 div 标签表示），用于放置每个选项卡对应的内容。每个 .tab-pane 具有唯一的 ID，对应对应的标签项的 href 属性。

CSS 样式

我们可以使用 CSS 样式来使选项卡看起来更漂亮。

以下是一个基本的选项卡 CSS 样式示例：

.tabs {
  border: 1px solid #ccc;
  padding: 10px;
}

.tabs-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tabs-nav li {
  float: left;
  margin-right: 10px;
}

.tabs-nav li a {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-bottom: none;
  text-decoration: none;
  color: #333;
}

.tabs-nav .active a {
  border-color: #333;
}

.tab-pane {
  display: none;
  padding: 10px;
  border: 1px solid #ccc;
}

.tab-pane.active {
  display: block;
}

代码解析：

• .tabs 用于设置整个选项卡的边框和内边距。
• .tabs-nav 用于设置标签项列表样式。
• .tabs-nav li 用于设置标签项的样式，包括浮动和右侧间距。
• .tabs-nav li a 用于设置标签项链接样式，包括内边距、边框、文字颜色和文本装饰。
• .tabs-nav .active a 用于设置当前选中标签项链接的边框颜色。
• .tab-pane 用于设置内容区域的边框和内边距，同时隐藏每个内容区域。
• .tab-pane.active 用于显示当前选中的内容区域。

JS 交互

我们可以使用 JavaScript 监听标签项的点击事件，以切换选项卡的可见性。

以下是一个基本的选项卡 JavaScript 交互示例：

const tabsNav = document.querySelector('.tabs-nav');
const tabsContent = document.querySelector('.tabs-content');
const tabPanes = tabsContent.querySelectorAll('.tab-pane');

tabsNav.addEventListener('click', (event) => {
  if (event.target.tagName === 'A') {
    event.preventDefault();
    const targetPane = tabsContent.querySelector(event.target.hash);
    if (targetPane) {
      tabPanes.forEach((pane) => {
        pane.classList.remove('active');
      })
      targetPane.classList.add('active');
    }
  }
})

代码解析：

• 首先我们选择标签项和内容区域容器。
• 然后我们监听标签项的点击事件，并使用 event.target 来获取目标标签项链接。
• 我们可以使用 event.preventDefault() 阻止链接默认跳转行为。
• 我们使用 targetPane 获取目标标签链接对应的内容区域，检查是否存在。
• 如果存在，我们将所有内容区域的 active 类名移除，并为目标内容区域添加 active 类名，以显示它。

到此，我们就完成了在 HTML 中创建包含不同内容的选项卡。我们可以根据需要定制 HTML 结构、CSS 样式和 JavaScript 交互以适应不同的设计需求。