隨著網路的發展，網站的介面越來越酷，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中文網其他相關文章！
