focus-within switch tab

最新推荐文章于 2023-05-08 21:29:06 发布

睿峰教育-IT资讯

最新推荐文章于 2023-05-08 21:29:06 发布

阅读量242

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/tianlaiit/article/details/125601368

版权

今天天来妹儿给大家分享的是使用 :focus-within 来实现 tab 切换功能。如下图：

:focus-within 它表示一个元素获得焦点，或，该元素的后代元素获得焦点。划重点，它或它的后代获得焦点。

这也就意味着，它或它的后代获得焦点，都可以触发 :focus-within。

关键点

这个属性有点类似 Javascript 的事件冒泡，从可获焦元素开始一直冒泡到根元素 html，都可以接收触发 :focus-within 事件
本例子的思路就是通过获焦来控制其他选择器，以及最重要的是利用了父级的 :not(:focus-within) 来设置默认样式

HTML：

 1  <div class="container">
 2      <div class="nav-box">
 3        <button class="nav-a">Tab-A</button>
 4        <button class="nav-b">Tab-B</button>
 5        <div class="content-box">
 6            <div class="content-a">content-a</div>
 7            <div class="content-b">content-b</div>
 8        </div>
 9      </div>
10  </div>

CSS：

 1.container{
 2    width: 300px;
 3    margin: 50px auto;
 4    padding: 10px;
 5    border: 1px solid #ddd;
 6  }
 7  .nav-box{
 8    font-size: 0;
 9  }
10  button{
11    width: 150px;
12    height: 64px;
13    box-sizing: border-box;
14    outline: none;
15    background-color: #fff;
16    border: 1px solid #ddd;
17    font-size: 18px;
18    cursor: pointer;
19  }
20  button:focus-within{
21    color: #fff;
22    background-color: #ffcc00;
23  }
24  .content-box{
25    font-size: 24px;
26    border: 1px solid #ddd;
27    height: 100px;
28  }
29  .content-box div{
30    display: none;
31  }
32  .nav-box:not(:focus-within) .nav-a{
33    color: #fff;
34    background-color: #ffcc00;
35  }
36  .nav-box:not(:focus-within) .content-a{
37    display: block;
38  }
39  .nav-a:focus-within ~ .content-box .content-a{
40    display: block;
41  }
42  .nav-b:focus-within ~ .content-box .content-b{
43    display: block;
44  }