用CSS實現tab切換

王铁柱6發表於2024-12-02
CSS
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab 切換</title>
    <style>
        .tabs {
            display: flex;
            list-style: none;
            padding: 0;
            margin: 0;
            border-bottom: 2px solid #ccc;
        }

        .tab-item {
            padding: 10px 20px;
            cursor: pointer;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .tab-item.active {
            background-color: #f0f0f0;
            border-bottom: 2px solid transparent; /* 避免底部雙線 */
        }

        .tab-content {
            padding: 20px;
            border: 1px solid #ccc;
            border-top: none; /* 避免頂部雙線 */
            display: none; /* 預設隱藏所有內容 */
        }

        .tab-content.active {
            display: block;
        }
    </style>
</head>
<body>

    <ul class="tabs">
        <li class="tab-item active" data-tab="tab1">Tab 1</li>
        <li class="tab-item" data-tab="tab2">Tab 2</li>
        <li class="tab-item" data-tab="tab3">Tab 3</li>
    </ul>

    <div class="tab-content active" id="tab1">
        <h2>Tab 1 Content</h2>
        <p>This is the content of Tab 1.</p>
    </div>

    <div class="tab-content" id="tab2">
        <h2>Tab 2 Content</h2>
        <p>This is the content of Tab 2.</p>
    </div>

    <div class="tab-content" id="tab3">
        <h2>Tab 3 Content</h2>
        <p>This is the content of Tab 3.</p>
    </div>

    <script>
        const tabItems = document.querySelectorAll('.tab-item');
        const tabContents = document.querySelectorAll('.tab-content');

        tabItems.forEach(item => {
            item.addEventListener('click', () => {
                const targetTab = item.dataset.tab;

                // 移除所有 tab-item 和 tab-content 的 active class
                tabItems.forEach(i => i.classList.remove('active'));
                tabContents.forEach(c => c.classList.remove('active'));

                // 為當前點選的 tab-item 和對應的 tab-content 新增 active class
                item.classList.add('active');
                document.getElementById(targetTab).classList.add('active');
            });
        });
    </script>

</body>
</html>

程式碼解釋:

  • HTML 結構: 使用無序列表(ul)建立標籤，列表項(li)作為每個標籤按鈕。每個標籤按鈕都有一個 data-tab 屬性，用於關聯對應的標籤內容。標籤內容使用 div 元素，並透過 id 與 data-tab 值對應。
  • CSS 樣式: 設定標籤按鈕和內容的樣式，包括啟用狀態的樣式。
  • JavaScript 互動:
    • 使用 querySelectorAll 獲取所有標籤按鈕和內容元素。
    • 遍歷標籤按鈕，為每個按鈕新增點選事件監聽器。
    • 在點選事件處理函式中：
      • 獲取點選按鈕的 data-tab 屬性值。
      • 移除所有標籤按鈕和內容的 active 類，清除之前的啟用狀態。
      • 為當前點選的按鈕和對應的標籤內容新增 active 類，顯示對應內容。

關鍵點:

  • 使用 data-tab 屬性關聯標籤按鈕和內容，使程式碼更清晰易維護。
  • 使用 JavaScript 動態新增/移除 active 類控制標籤切換。
  • CSS 中使用 transition 屬性實現平滑的過渡效果。

This example provides a clear and concise solution for implementing tab switching with CSS and JavaScript. It's easy to understand and modify for your specific needs. Remember to adjust the styling and content to match your design.

相關文章