純CSS實現選項卡效果
阿新 • • 發佈:2019-01-27
利用 :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>