css 实现tab

CSS 实现 Tab 样式

Tab 样式是 web 开发中非常常见的一种交互设计，它以标签页的形式展示多个内容区域，用户通过点击选项卡来切换显示区域，大大提高了网页的易用性。在本文中，我们将介绍如何使用 CSS 来实现一种简单的 Tab 样式。

首先，我们需要先定义 HTML 结构，具体的结构如下：

<div class="tab">
  <div class="tab-header">
    <button class="tab-button active">Tab 1</button>
    <button class="tab-button">Tab 2</button>
    <button class="tab-button">Tab 3</button>
  </div>
  <div class="tab-content active">
    <p>这里是 Tab 1 的内容</p>
  </div>
  <div class="tab-content">
    <p>这里是 Tab 2 的内容</p>
  </div>
  <div class="tab-content">
    <p>这里是 Tab 3 的内容</p>
  </div>
</div>

在上述结构中，我们使用 div 元素作为容器，包含了两个子元素，分别是选项卡头和选项卡内容。选项卡头使用 button 元素表示每个选项卡，而选项卡内容使用 div 元素包裹。其中，每个选项卡和选项卡内容都相关联的一个 active 类名，用于表示当前选择的选项卡。

接下来，我们开始使用 CSS 来定义样式。首先，我们需要去掉 button 元素的默认样式：

button {
  background: transparent;
  border: none;
  outline: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

在上述样式中，我们去掉了 button 元素的背景、边框、轮廓和填充，让它看起来像一个纯文本链接。并且设置了鼠标指针的样式为手型，让它看起来更像一个可点击的按钮。

下一步，我们设置 .tab-header 的样式，来实现选项卡的背景色和激活状态：

.tab-header {
  display: flex;
}

.tab-button {
  background-color: #f4f4f4;
}

.tab-button:hover {
  background-color: #ddd;
}

.tab-button.active {
  background-color: #ddd;
}

在上述样式中，我们使用了 Flexbox 布局来使得选项卡水平排列。然后，我们定义了 .tab-button 的背景色和悬停状态的背景色。最后，我们使用类名 .active 来表示当前激活的选项卡，我们将它的背景色设置为和悬停状态相同，以便在页面加载时直接显示出选项卡的激活状态。

现在，我们只需要为每个选项卡定义一个类名，并将激活状态的类名添加到第一个选项卡中。例如：

<button class="tab-button active tab-1">Tab 1</button>
<button class="tab-button tab-2">Tab 2</button>
<button class="tab-button tab-3">Tab 3</button>

在上述结构中，我们为每个选项卡分别添加了一个类名 tab-1、tab-2、tab-3。这些类名将用于为各自的选项卡定义 CSS 样式。

下一步，我们设置 .tab-content 的样式，来实现选项卡内容的显示和隐藏：

.tab-content:not(.active) {
  display: none;
}

在上述样式中，我们使用了 :not(.active) 选择器来匹配除了激活状态之外的选项卡内容。我们设置它们的 display 属性为 none，以便让它们隐藏在页面上。

最后，我们使用 JavaScript 绑定事件，来实现点击选项卡切换内容的功能：

const tabs = document.querySelectorAll('.tab-button')

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // 隐藏所有选项卡内容
    document.querySelectorAll('.tab-content').forEach(content => {
      content.classList.remove('active')
    })
    // 显示当前选项卡内容
    const activeTab = tab.classList[1]
    document.querySelector(`.${activeTab}`).classList.add('active')
    // 切换选项卡的激活状态
    tabs.forEach(tab => {
      tab.classList.remove('active')
    })
    tab.classList.add('active')
  })
})

在上述代码中，我们使用了 querySelectorAll() 方法选择所有选项卡内容元素，并在点击选项卡时循环遍历它们，将它们的 active 类名全部移除。然后，我们使用 classList 属性获取当前选项卡对应的内容元素，并添加 active 类名，以便显示该选项卡内容。最后，我们将所有选项卡的激活状态移除，并为当前选项卡添加 active 类名，使其呈现激活状态。这样，我们就成功实现了一个简单的 Tab 样式。

总结：

在这篇文章中，我们使用了 CSS 和 JavaScript 来实现了一个简单的 Tab 样式。我们首先定义了 HTML 结构，然后使用 CSS 定义了选项卡的背景色、悬停状态和激活状态。最后，我们使用 JavaScript 来实现了点击选项卡切换内容的功能。这种样式的实现方法简单、易于理解和修改，适用于大部分 web 开发项目。

以上是css 实现tab的详细内容。更多信息请关注PHP中文网其他相关文章！