seven
/
bot-28


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯 CSS 实现的选项卡</title>
    <style>
        /* 容器样式 */
        .layui-tabs {
            width: 100%;
            max-width: 600px;
            margin: 20px auto;
            font-family: Arial, sans-serif;
        }

        /* 选项卡标签样式 */
        .layui-tabs-header {
            display: flex;
            border-bottom: 1px solid #dcdfe6;
        }

        /* 隐藏原始输入框 */
        .layui-tabs input[type="radio"] {
            display: none;
        }

        /* 选项卡标签样式 */
        .layui-tabs-header label {
            padding: 10px 20px;
            font-size: 14px;
            cursor: pointer;
            background-color: #f7f7f7;
            border: 1px solid transparent;
            transition: all 0.3s ease;
        }

        .layui-tabs-header label:hover {
            background-color: #f0f0f0;
        }

        /* 激活的标签样式 */
        .layui-tabs input[type="radio"]:checked + label {
            background-color: #fff;
            border-color: #ddd;
            border-bottom-color: transparent;
            color: #409eff;
            font-weight: bold;
        }

        /* 选项卡内容区域样式 */
        .layui-tabs-content {
            padding: 20px;
            background-color: #fff;
            border: 1px solid #dcdfe6;
            border-top: none;
        }

        /* 默认情况下隐藏所有内容 */
        .layui-tabs-content .layui-tab-pane {
            display: none;
        }

        /* 显示对应选项卡的内容 */
        #tab-1:checked ~ .layui-tabs-content .pane-1 {
            display: block;
        }

        #tab-2:checked ~ .layui-tabs-content .pane-2 {
            display: block;
        }

        #tab-3:checked ~ .layui-tabs-content .pane-3 {
            display: block;
        }
    </style>
</head>
<body>

<div class="layui-tabs">
    <!-- 选项卡的标签部分 -->
    <div class="layui-tabs-header">
        <input type="radio" name="tab" id="tab-1" checked>
        <label for="tab-1">Tab 1</label>

        <input type="radio" name="tab" id="tab-2">
        <label for="tab-2">Tab 2</label>

        <input type="radio" name="tab" id="tab-3">
        <label for="tab-3">Tab 3</label>

    </div>

    <!-- 选项卡的内容部分 -->
    <div class="layui-tabs-content">
        <div class="layui-tab-pane pane-1">内容 1: 这是第一个选项卡的内容。</div>
        <div class="layui-tab-pane pane-2">内容 2: 这是第二个选项卡的内容。</div>
        <div class="layui-tab-pane pane-3">内容 3: 这是第三个选项卡的内容。</div>
    </div>
</div>

</body>
</html>