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

Daming 2019-10-17
0条评论 334 次浏览
Daming 2019-10-170条评论 334 次浏览

原理就是在每个列表里放入不可见的 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

2+

发表评论

电子邮件地址不会被公开。