html tab

作者：热血震荡发布日期:2026-07-26 浏览:69

<!-- HTML Tabs Example -->
<!DOCTYPE html>
<html>
<head>
    <style>
        /* 样式：设置标签的样式 */
        .tab {
            overflow: hidden;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        /* 标签按钮的样式 */
        .tab button {
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            transition: 0.3s;
        }

        /* 当鼠标悬停在按钮上时改变背景颜色 */
        .tab button:hover {
            background-color: #ddd;
        }

        /* 激活的按钮 */
        .tab button.active {
            background-color: #ccc;
        }

        /* 内容区域的样式 */
        .tabcontent {
            display: none;
            padding: 6px 12px;
            border: 1px solid #ccc;
            border-top: none;
        }
    </style>
</head>
<body>

<!-- Tab 标签容器 -->
<div class="tab">
    <button class="tablinks" onclick="openTab(event, 'Tab1')">Tab 1</button>
    <button class="tablinks" onclick="openTab(event, 'Tab2')">Tab 2</button>
    <button class="tablinks" onclick="openTab(event, 'Tab3')">Tab 3</button>
</div>

<!-- Tab 内容容器 -->
<div id="Tab1" class="tabcontent">
    <h3>Tab 1</h3>
    <p>这是 Tab 1 的内容。</p>
</div>

<div id="Tab2" class="tabcontent">
    <h3>Tab 2</h3>
    <p>这是 Tab 2 的内容。</p>
</div>

<div id="Tab3" class="tabcontent">
    <h3>Tab 3</h3>
    <p>这是 Tab 3 的内容。</p>
</div>

<script>
    // 默认打开第一个 Tab
    document.getElementById("Tab1").style.display = "block";

    // 切换 Tab 的函数
    function openTab(evt, tabName) {
        var i, tabcontent, tablinks;

        // 隐藏所有 Tab 内容
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }

        // 移除所有按钮的 active 类
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }

        // 显示当前 Tab，并为按钮添加 active 类
        document.getElementById(tabName).style.display = "block";
        evt.currentTarget.className += " active";
    }
</script>

</body>
</html>

解释说明：

HTML 结构:
- 使用 div 元素创建一个包含多个按钮的标签栏（.tab）。
- 每个按钮对应一个 div 容器（.tabcontent），用于显示该标签的内容。
CSS 样式:
- 设置了标签栏和按钮的基本样式，包括背景色、边框、悬浮效果等。
- .tabcontent 初始状态下是隐藏的 (display: none)，只有当点击对应的按钮时才会显示。
JavaScript 功能:
- openTab 函数用于切换不同的标签页。它会隐藏所有内容区，然后显示与点击的按钮相对应的内容区。
- 默认情况下，页面加载时会显示第一个标签页的内容。

通过这种方式，用户可以点击不同的标签来查看不同的内容。

上一篇：html帮助查看器

下一篇：空格 html