CSS 实现 Tab 样式Tab 样式是 WEB 开发中非常常见的一种交互设计，它以标签页的形式展示多个内容区域，用户通过点击选项卡来切换显示区域，大大提高了网页的易用性。在本文中，我们将介绍如何使用 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的详细内容，更多请关注编程网其它相关文章！
--结束END--
本文标题: css 实现tab
本文链接: https://lsjlt.com/news/215167.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-24
2023-05-24
2023-05-24
2023-05-24
2023-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0