javascript怎麼寫tab選項卡
PHPz
發布： 2023-04-25 16:44:08
原創
728 人瀏覽過
隨著網路的發展，網站的介面越來越酷，Tab 選項卡成為了現代網站中常見的 UI 元素之一。這篇文章將介紹如何使用 JavaScript 寫 Tab 選項卡，讓你的網站更現代化。
- HTML 結構
首先，我們需要在HTML 中建立選項卡的結構，可以採用以下程式碼：
- Tab 1
- Tab 2
- Tab 3
Tab 1 contentTab 2 contentTab 3 content
登入後複製
上面的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 程式碼結合起來，形成完整的程式碼如下：
Tab 选项卡
- Tab 1
- Tab 2
- Tab 3
Tab 1 contentTab 2 contentTab 3 content
登入後複製
現在，你可以透過複製貼上以上程式碼來自行實現一個Tab 選項卡，讓你的網站更加現代化。
以上是javascript怎麼寫tab選項卡的詳細內容。更多資訊請關注PHP中文網其他相關文章！
來源：php.cn
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
-
2024-09-02 20:01:10
-
2024-09-02 20:00:39
-
2024-09-02 20:00:11
-
2024-09-02 19:31:00
-
2024-09-02 19:30:58
-
2024-09-02 19:30:37
-
2024-09-02 19:00:32
-
2024-09-02 18:35:36
-
2024-09-02 18:34:32
-
2024-09-02 18:32:22
最新問題
function_exists()無法判定自訂函數
function test() { return true; } if (function_exists('TEST')) { ech...
來自於 2024-04-29 11:01:01
0
2
1081
父視窗沒有輸出
document.onclick = function(){ window.opener.document.write('我是子視窗的輸出'); ...
來自於 2024-04-18 23:52:34
0
1
912
熱門教學
更多>
php入門教程之一週學會PHP4210970
JAVA 初級入門影片教學2368926
小甲魚零基礎入門學習Python影片教學494674
PHP 零基礎入門教學828742
