纯CSS实现内容切换进阶篇_css 文字切换-CSDN博客

本文链接：https://blog.csdn.net/qq_26822029/article/details/124390501

本文展示了如何仅使用CSS实现类似element-ui的Tab组件，包括嵌套的面板切换效果。通过隐藏和显示相关内容，利用CSS选择器改变选中标签的样式，实现了动态的面板展示。示例代码详细展示了实现过程，可作为前端开发的学习参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用纯CSS也能作出element-ui中的Tab组件效果（如基础篇所实现的效果），而且经过精心设计还可以作出嵌套的panel效果，如下图所示：
在这里插入图片描述

贴出源码，欢迎批评指正：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        body {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .wrapper {
            position: relative;
            width: 1000px;
            background-color: black;
        }
        
        .sub-wrapper {
            position: relative;
            width: 100%;
            height: fit-content;
            background-color: grey;
        }
        
        input[type="radio"] {
            display: none;
        }
        
        label {
            display: inline-block;
            margin: 10px;
            padding: 5px 10px;
            background-color: gainsboro;
            border-radius: 8px;
        }
        
        label:hover {
            cursor: pointer;
        }
        
        .wrapper div {
            display: none;
            position: absolute;
            top: 50px;
        }
        
        input[type="radio"].layer1-navi:checked+label {
            background-color: red;
            color: white;
        }
        
        input[type="radio"]:checked+label+div {
            display: block;
        }
        
        input[type="radio"].layer2-navi:checked+label {
            background-color: orange;
            color: white;
        }
        
        .content {
            width: 100%;
            height: 200px;
            background-color: lightgoldenrodyellow;
            margin-top: 10px;
            padding: 10px;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <input type="radio" class="layer1-navi" id="navi1" name="radio1" checked/>
        <label for="navi1">一级标签1</label>
        <div class="sub-wrapper">
            <input type="radio" class="layer2-navi" id="radio1-1" name="radio12" checked/>
            <label for="radio1-1">二级标签1</label>
            <div class="content">
                <a href="https://www.baidu.com">www.baidu.com</a>
            </div>
            <input type="radio" class="layer2-navi" id="radio1-2" name="radio12" />
            <label for="radio1-2">二级标签2</label>
            <div class="content">1-2</div>
            <input type="radio" class="layer2-navi" id="radio1-3" name="radio12" />
            <label for="radio1-3">二级标签3</label>
            <div class="content">1-3</div>
        </div>

        <input type="radio" class="layer1-navi" id="navi2" name="radio1" />
        <label for="navi2">一级标签2</label>
        <div class="sub-wrapper">
            <input type="radio" class="layer2-navi" id="radio2-1" name="radio22" checked/>
            <label for="radio2-1">二级标签1</label>
            <div class="content">2-1</div>
            <input type="radio" class="layer2-navi" id="radio2-2" name="radio22" />
            <label for="radio2-2">二级标签2</label>
            <div class="content">2-2</div>
        </div>

        <input type="radio" class="layer1-navi" id="navi3" name="radio1" />
        <label for="navi3">一级标签3</label>
        <div class="sub-wrapper">
            <input type="radio" class="layer2-navi" id="radio3-1" name="radio33" checked/>
            <label for="radio3-1">二级标签1</label>
            <div class="content">3-1</div>
        </div>

        <input type="radio" class="layer1-navi" id="navi4" name="radio1" />
        <label for="navi4">一级标签4</label>
        <div class="sub-wrapper">
            <input type="radio" class="layer2-navi" id="radio4-1" name="radio44" checked/>
            <label for="radio4-1">二级标签1</label>
            <div class="content">4-1</div>
            <input type="radio" class="layer2-navi" id="radio4-2" name="radio44" />
            <label for="radio4-2">二级标签2</label>
            <div class="content">4-2</div>
            <input type="radio" class="layer2-navi" id="radio4-3" name="radio44" />
            <label for="radio4-3">二级标签3</label>
            <div class="content">4-3</div>
            <input type="radio" class="layer2-navi" id="radio4-4" name="radio44" />
            <label for="radio4-4">二级标签4</label>
            <div class="content">4-4</div>
            <input type="radio" class="layer2-navi" id="radio4-5" name="radio44" />
            <label for="radio4-5">二级标签5</label>
            <div class="content">4-5</div>
        </div>

        <input type="radio" class="layer1-navi" id="navi5" name="radio1" />
        <label for="navi5">一级标签5</label>
        <div class="sub-wrapper">
            <input type="radio" class="layer2-navi" id="radio5-1" name="radio55" checked/>
            <label for="radio5-1">二级标签1</label>
            <div class="content">5-1</div>
            <input type="radio" class="layer2-navi" id="radio5-2" name="radio55" />
            <label for="radio5-2">二级标签2</label>
            <div class="content">5-2</div>
            <input type="radio" class="layer2-navi" id="radio5-3" name="radio55" />
            <label for="radio5-3">二级标签3</label>
            <div class="content">5-3</div>
        </div>
    </div>
</body>

</html>