实现一个简单的标签页 (Tabs)

推荐答案

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Tabs</title>
    <style>
        .tabs {
            display: flex;
            border-bottom: 1px solid #ccc;
        }
        .tab {
            padding: 10px 20px;
            cursor: pointer;
            border: 1px solid #ccc;
            border-bottom: none;
            background-color: #f1f1f1;
            margin-right: 5px;
        }
        .tab.active {
            background-color: #fff;
            border-bottom: 1px solid #fff;
        }
        .tab-content {
            padding: 20px;
            border: 1px solid #ccc;
            border-top: none;
        }
        .content {
            display: none;
        }
        .content.active {
            display: block;
        }
    </style>
</head>
<body>

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

<div class="tab-content">
    <div class="content active" id="tab1">Content for Tab 1</div>
    <div class="content" id="tab2">Content for Tab 2</div>
    <div class="content" id="tab3">Content for Tab 3</div>
</div>

<script>
    const tabs = document.querySelectorAll('.tab');
    const contents = document.querySelectorAll('.content');

    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            // Remove active class from all tabs and contents
            tabs.forEach(t => t.classList.remove('active'));
            contents.forEach(c => c.classList.remove('active'));

            // Add active class to the clicked tab and corresponding content
            tab.classList.add('active');
            const tabId = tab.getAttribute('data-tab');
            document.getElementById(tabId).classList.add('active');
        });
    });
</script>

</body>
</html>

本题详细解读

1. HTML 结构

• Tabs 容器：.tabs 是一个包含所有标签的容器，每个标签是一个 .tab 元素。
• Tab 内容容器：.tab-content 是一个包含所有内容区域的容器，每个内容区域是一个 .content 元素。

2. CSS 样式

• Tabs 样式：.tab 是每个标签的样式，.tab.active 是当前激活标签的样式。
• Content 样式：.content 是每个内容区域的样式，.content.active 是当前激活内容区域的样式。

3. JavaScript 逻辑

• 事件监听：为每个 .tab 元素添加点击事件监听器。
• 切换逻辑：当点击某个标签时，移除所有标签和内容区域的 active 类，然后为当前点击的标签和对应的内容区域添加 active 类。

4. 数据绑定

• data-tab 属性：每个 .tab 元素都有一个 data-tab 属性，用于绑定对应的内容区域。通过 getAttribute('data-tab') 获取对应的内容区域的 id，从而实现标签与内容的联动。

5. 交互效果

• 点击切换：点击不同的标签时，对应的内容区域会显示，其他内容区域会隐藏。

通过以上代码，实现了一个简单的标签页功能，用户可以点击不同的标签来切换显示不同的内容。