纯CSS实现选项卡效果

利用 :focus-within 可以在父节点获取元素获得焦点的特性,实现的TAB导航切换

<style type="text/css">
.xxk { width: 300px;margin: 50px auto;padding: 10px;border: 1px solid #ddd;}
.nav-box {font-size: 0;}
button {width: 50%; height: 64px;box-sizing: border-box;outline: none;background: #fff;border: 1px solid #ddd;font-size: 18px;cursor: pointer;}
button:focus-within {color: #fff;background: #ffcc00;}
.content-box {font-size: 24px;border: 1px solid #ddd;height: 100px;}
.content-box div{display: none;}
.nav-box:not(:focus-within) .nav-A {color: #fff; background: #ffcc00; }<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>
.nav-box:not(:focus-within) .content-A {display: block;}
.nav-A:focus-within ~ .content-box .content-A {display: block;}
.nav-B:focus-within ~ .content-box .content-B { display: block;}
	</style>

<div class="xxk">
<div class="nav-box">
<button class="nav-A">Tab-A</button> <button class="nav-B">Tab-B</button>
<div class="content-box">
<div class="content-A">content-A</div>
<div class="content-B">content-B</div>
</div>
</div>
</div>

Demo演示:https://blog.retechs.cn/demo/xxk/

点赞
  1. cialis说道:

    Spot on with this write-up, I actually think
    this site needs far more attention. I'll probably be returning to see
    more, thanks for the information!

发表评论