随着互联网的发展，网站的界面越来越炫酷，Tab 选项卡成为了现代网站中常见的 UI 元素之一。这篇文章将介绍如何使用 JavaScript 编写 Tab 选项卡，来让你的网站更加现代化。
- HTML 结构
首先，我们需要在 HTML 中创建选项卡的结构，可以采用以下代码：
<div class="tab-container">
<ul class="tab-nav">
<li class="tab-nav-item active">Tab 1</li>
<li class="tab-nav-item">Tab 2</li>
<li class="tab-nav-item">Tab 3</li>
</ul>
<div class="tab-content active">Tab 1 content</div>
<div class="tab-content">Tab 2 content</div>
<div class="tab-content">Tab 3 content</div>
</div>
登录后复制
上面的 HTML 结构包含了一个选项卡容器（tab-container），其中包含了一个选项卡导航栏（tab-nav）和选项卡内容（tab-content）。在导航栏中，每个选项卡都是一个列表项（tab-nav-item），并且可以通过添加 "active" 类来指示当前选中的选项卡。在内容中，也可以通过添加 "active" 类来指示当前选中的选项卡的内容。
- CSS 样式
接下来，我们需要为选项卡和内容添加样式，可以采用以下代码：
.tab-container {
display: flex;
flex-direction: column;
margin: 20px;
border: 1px solid #ccc;
border-radius: 4px;
overflow: hidden;
box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px;
}
.tab-nav {
display: flex;
justify-content: space-between;
align-items: center;
background: #eee;
padding: 10px;
}
.tab-nav-item {
cursor: pointer;
padding: 10px;
border-radius: 4px;
transition: all 0.3s ease;
}
.tab-nav-item:hover {
background: #fff;
}
.tab-nav-item.active {
background: #fff;
font-weight: bold;
}
.tab-content {
padding: 20px;
display: none;
}
.tab-content.active {
display: block;
}登录后复制
上面的 CSS 样式设置了选项卡容器的位置、大小、边框、阴影等属性，以及导航栏和选项卡内容的样式。注意，选项卡内容的 display 属性设置为 none，只有在选中对应的选项卡时才会显示。
- JavaScript 代码
最后，我们需要编写 JavaScript 代码来使选项卡实现点击切换显示。可以采用以下代码：
const tabs = document.querySelectorAll('.tab-nav-item');
const contents = document.querySelectorAll('.tab-content');
for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', function() {
// 首先隐藏所有选项卡内容
for (let j = 0; j < contents.length; j++) {
contents[j].classList.remove('active');
}
// 设置当前选中的选项卡添加 "active" 类
for (let j = 0; j < tabs.length; j++) {
tabs[j].classList.remove('active');
}
this.classList.add('active');
contents[i].classList.add('active');
});
}登录后复制
上面的 JavaScript 代码使用了事件监听器实现了点击选项卡导航栏时，切换对应的选项卡内容的功能。首先，隐藏所有选项卡内容，然后设置当前选中的选项卡和对应的内容添加 "active" 类，以达到显示选项卡内容的效果。
- 完整代码
最后，我们将以上的 HTML、CSS 和 JavaScript 代码结合起来，形成完整的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tab 选项卡</title>
<style>
.tab-container {
display: flex;
flex-direction: column;
margin: 20px;
border: 1px solid #ccc;
border-radius: 4px;
overflow: hidden;
box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px;
}
.tab-nav {
display: flex;
justify-content: space-between;
align-items: center;
background: #eee;
padding: 10px;
}
.tab-nav-item {
cursor: pointer;
padding: 10px;
border-radius: 4px;
transition: all 0.3s ease;
}
.tab-nav-item:hover {
background: #fff;
}
.tab-nav-item.active {
background: #fff;
font-weight: bold;
}
.tab-content {
padding: 20px;
display: none;
}
.tab-content.active {
display: block;
}
</style>
</head>
<body>
<div class="tab-container">
<ul class="tab-nav">
<li class="tab-nav-item active">Tab 1</li>
<li class="tab-nav-item">Tab 2</li>
<li class="tab-nav-item">Tab 3</li>
</ul>
<div class="tab-content active">Tab 1 content</div>
<div class="tab-content">Tab 2 content</div>
<div class="tab-content">Tab 3 content</div>
</div>
<script>
const tabs = document.querySelectorAll('.tab-nav-item');
const contents = document.querySelectorAll('.tab-content');
for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', function() {
// 首先隐藏所有选项卡内容
for (let j = 0; j < contents.length; j++) {
contents[j].classList.remove('active');
}
// 设置当前选中的选项卡添加 "active" 类
for (let j = 0; j < tabs.length; j++) {
tabs[j].classList.remove('active');
}
this.classList.add('active');
contents[i].classList.add('active');
});
}
</script>
</body>
</html>登录后复制
现在，你可以通过复制粘贴以上代码来自己实现一个 Tab 选项卡，让你的网站更加现代化。
以上是javascript怎么编写tab选项卡的详细内容。更多信息请关注PHP中文网其他相关文章！
