纯CSS实现选项卡效果

原文链接：https://blog.retechs.cn/976.html

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

.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;}

<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/