HTML 标签页（Tabs）详细讲解

news2025/1/2 22:38:24

HTML 标签页（Tabs）详细讲解

标签页（Tabs）是一种用户界面控件，允许用户在同一页面上切换不同的内容区域。它们通过将相关内容分组并在用户交互时动态显示，提供了一种直观的导航方式。

1. 标签页的结构

标签页通常由两个主要部分组成：

标签（Tab）：用户可以点击的选项卡，用于切换显示的内容。
内容区域（Content Area）：根据选中的标签显示的具体内容。

2. HTML 示例

以下是一个简单的 HTML 标签页示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签页示例</title>
    <style>
        /* 样式设置 */
        .tabs {
            display: flex;
            cursor: pointer;
        }
        .tab {
            padding: 10px 20px;
            border: 1px solid #ccc;
            background: #f1f1f1;
            margin-right: 5px;
        }
        .tab.active {
            background: #fff;
            border-bottom: none;
        }
        .content {
            border: 1px solid #ccc;
            padding: 20px;
            display: none; /* 默认隐藏内容 */
        }
        .content.active {
            display: block; /* 显示当前选中的内容 */
        }
    </style>
</head>
<body>

<div class="tabs">
    <div class="tab active" onclick="showContent('content1')">标签 1</div>
    <div class="tab" onclick="showContent('content2')">标签 2</div>
    <div class="tab" onclick="showContent('content3')">标签 3</div>
</div>

<div id="content1" class="content active">
    <h2>内容 1</h2>
    <p>这是标签 1 的内容。</p>
</div>
<div id="content2" class="content">
    <h2>内容 2</h2>
    <p>这是标签 2 的内容。</p>
</div>
<div id="content3" class="content">
    <h2>内容 3</h2>
    <p>这是标签 3 的内容。</p>
</div>

<script>
    function showContent(contentId) {
        // 隐藏所有内容
        const contents = document.querySelectorAll('.content');
        contents.forEach(content => content.classList.remove('active'));

        // 移除所有标签的激活状态
        const tabs = document.querySelectorAll('.tab');
        tabs.forEach(tab => tab.classList.remove('active'));

        // 显示当前选中的内容
        document.getElementById(contentId).classList.add('active');

        // 设置当前标签为激活状态
        const activeTab = Array.from(tabs).find(tab => tab.innerText === contentId.replace('content', '标签 '));
        activeTab.classList.add('active');
    }
</script>

</body>
</html>

3. 代码解析

HTML 结构：
- 使用 <div> 元素创建标签和内容区域。
- 每个标签和内容区域都有一个相应的 ID，以便在 JavaScript 中进行操作。
样式（CSS）：
- 样式设置使得标签看起来像按钮，并为激活的标签和内容区域提供不同的样式。
JavaScript 功能：
- showContent 函数用于根据用户的点击显示相应的内容。
- 通过添加和移除 CSS 类来控制显示和隐藏内容。