不使用js,纯html css实现tab点击切换效果

原理就是在每个列表里放入不可见的 input 输入框，然后选项卡按钮设置label元素，通过 label for 属性与input输入框的 id 相关联。这样，点击选项卡按钮会触发输入框的 focus 行为，触发锚点定位，实现选项卡切换效果。

<div class="wrap">

    <div class="box">
        <div class="list" style="background-color: #94e337"><input id="one" readonly>1</div>
        <div class="list" style="background-color: #34aebe"><input id="two" readonly>2</div>
        <div class="list" style="background-color: #fe7a61"><input id="three" readonly>3</div>
        <div class="list" style="background-color: #886ffe"><input id="four" readonly>4</div>
    </div>
    <div class="link">
        <label class="click" for="one">1</label>
        <label class="click" for="two">2</label>
        <label class="click" for="three">3</label>
        <label class="click" for="four">4</label>
    </div>
</div>

css:

        .wrap {
            width: 500px;
            box-sizing: border-box;
        }

        .box {
            width: 500px;
            height: 200px;
            border: 1px solid #ddd;
            overflow: hidden;
        }

        .list {
            height: 100%;
            background: #ddd;
            text-align: center;
            position: relative;
        }

        .list > input {
            position: absolute;
            top: 0;
            height: 100%;
            width: 100%;
            border: 0;
            padding: 0;
            margin: 0;
            clip: rect(0 0 0 0);
        }

        .link {
            text-align: center;
            margin: 15px 0;
        }

        .link > .click {
            background-color: #0f6674;
            border: 1px solid gray;
            padding: 5px;
            color: white;
            cursor: pointer;
        }

demo演示地址:https://demo.crazyming.com/?link=nojs-tab