css div实现标签卡tab效果

基础概念

CSS div 实现标签卡（Tab）效果是一种常见的前端页面布局方式，通过 CSS 和 JavaScript 结合使用，可以实现点击不同的标签页切换显示不同的内容区域。

优势

简洁性：使用 CSS 和简单的 HTML 结构即可实现复杂的布局效果。
灵活性：可以通过 CSS 控制样式，实现各种自定义的标签卡效果。
性能：相比于复杂的 JavaScript 动画，纯 CSS 实现的标签卡效果性能更好。

类型

纯 CSS 实现：通过 CSS 伪类（如 :checked）和兄弟选择器（~）来实现标签页的切换。
JavaScript 辅助：通过 JavaScript 监听点击事件，动态改变 CSS 类来实现标签页的切换。

应用场景

标签卡效果广泛应用于各种网页和应用程序中，例如：

导航菜单
设置页面
产品展示
文章分类

示例代码

以下是一个使用纯 CSS 实现的标签卡效果的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Tab Effect</title>
    <style>
        .tab {
            display: flex;
        }
        .tab button {
            padding: 10px 20px;
            cursor: pointer;
            border: none;
            outline: none;
            transition: background-color 0.3s;
        }
        .tab button:hover {
            background-color: #ddd;
        }
        .tab button.active {
            background-color: #ccc;
        }
        .tabcontent {
            display: none;
            padding: 10px;
            border: 1px solid #ccc;
        }
        .tabcontent.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="tab">
        <button class="tablinks active" 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>

    <div id="Tab1" class="tabcontent active">
        <h3>Tab 1 Content</h3>
        <p>This is the content of Tab 1.</p>
    </div>

    <div id="Tab2" class="tabcontent">
        <h3>Tab 2 Content</h3>
        <p>This is the content of Tab 2.</p>
    </div>

    <div id="Tab3" class="tabcontent">
        <h3>Tab 3 Content</h3>
        <p>This is the content of Tab 3.</p>
    </div>

    <script>
        function openTab(evt, tabName) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].classList.remove("active");
            }
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].classList.remove("active");
            }
            document.getElementById(tabName).classList.add("active");
            evt.currentTarget.classList.add("active");
        }
    </script>
</body>
</html>