css 实现tab 卡片切换 多种方式

第一种 使用 css 的选择器配合 input 单选框

😂😂
分析:

1.使用  ~ 选择器来选择相邻的 元素
2.配合 input radio 单选的 checked 的属性值来判断
3. 结合 z-index 和 input for属性绑定对应label 来实现

html结构

<div class="tabs">
        <div class="tab">
            <input type="radio" id="tab-1" name="tabsonly" >
            <label for="">one</label>
            <div class="content">
                1
            </div>
        </div>
        <div class="tab">
            <input type="radio" id="tab-2" name="tabsonly" checked>
            <label for="">two</label>
            <div class="content">
                2
            </div>
        </div>
    </div>

css

  .tabs{
            position:relative;
            min-height: 200px;
            clear:both;
            margin: 25px 0;
        }
        .tab{
            float: left;
        }
        .tab label{
            background: #eee;
            padding: 10px;
            border:1px solid #ccc;
            margin-left: -1px;
            position: relative;
            left: 1px;
        }
        .tab [type=radio]{
            display: none;
        }
        .content{
            position: absolute;
            top:28px;
            left: 0px;
            background: white;
            right: 0;
            bottom: 0;
            padding: 20px;
            border: 1px solid #ccc;
        }
        [type=radio]:checked ~ label{
            background: white;
            border-bottom: 1px solid white;
            z-index: 2;
        }
        [type=radio]:checked ~ label ~ .content{
            z-index: 1;
        }

第二种 使用 button focus 属性来实现

删减版---这种代码少一些 😋😋
html

<div class="tabs">
        <div class="tab">
            <button autofocus>one</button>
            <div class="content">
                1
            </div>
        </div>
        <div class="tab">
            <button >two</button>
            <div class="content">
                2
            </div>
        </div>
    </div>

css

  .tabs{
            position:relative;
            min-height: 200px;
            clear:both;
            margin: 25px 0;
        }
        .tab{
            float: left;
        }
        .tab button{
            background: #eee;
            padding: 12px;
            border:1px solid #ccc;
            margin-left: -1px;
            position: relative;
            left: 1px;
            font-size: 14px;
            line-height: 14px;
        }
        .content{
            position: absolute;
            top:38px;
            left: 0px;
            background: white;
            right: 0;
            bottom: 0;
            padding: 20px;
            border: 1px solid #ccc;
        }
        button:focus{
            outline: none;
        }
        .tab button:focus{
            background: white;
            border-bottom: 1px solid white;
            z-index: 2;
        }
        .tab button:focus ~ .content{
            z-index: 1;
        }

第三种 精简版 搭配css3 的 target 伪元素
html

<div class="tablist">
        <ul class="tabmenu">
            <li><a href="#tab1">tab1</a></li>
            <li><a href="#tab2">tab2</a></li>
            <li><a href="#tab3">tab3</a></li>
        </ul>
        <div id="tab1" class="tab_content">tab1内容</div>
        <div id="tab2" class="tab_content">tab2内容</div>
        <div id="tab3" class="tab_content">tab3内容</div>
    </div>

css

.tabmenu {
            position: absolute;
            top: 100%;
            margin: 0;
        }
 
        .tabmenu li {
            display: inline-block;
        }
 
        .tabmenu li a {
            display: block;
            padding: 5px 10px;
            margin: 0 10px 0 0;
            border: 1px solid #91a7b4;
            border-radius: 0 0 5px 5px;
            background: #e3f1f8;
            color: #333;
            text-decoration: none;
        }
 
        .tablist {
            position: relative;
            margin: 50px auto;
            min-height: 200px;
        }
 
        .tab_content {
            position: absolute;
            width: 600px;
            height: 170px;
            padding: 15px;
            border: 1px solid #91a7b4;
            border-radius: 3px;
            box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
            font-size: 1.2em;
            line-height: 1.5em;
            color: #666;
            background: #fff;
        }
        /*使用css3(:target属性实现)，z-index控制元素层级*/
        #tab1:target, #tab2:target, #tab3:target {
            z-index: 1;
        }

原文链接：https://blog.csdn.net/qq_37581115/article/details/90340935