css 实现tab

百变鹏仔 2个月前 (10-31) #前端问答

文章标签 css

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><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</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

javascript里怎么输入

网页关闭javascript

javascript怎么实现异步

javascript隐藏的元素显示属性

javascript要全部记住吗