focus-within switch tab

今天天来妹儿给大家分享的是使用 :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  }

focus-within switch tab相关推荐

vs快捷键 switch tab tab enter 自动填充枚举类型
先switch然后两下tab 会补完到default,光标显示在switch后的变量这时输入枚举,输完后回车,补完所有枚举的case
【WPF】使用Tab键Focus控件的相关操作
页面一个页面(窗口)中默认的使用Tab键时,默认Focus元素的顺序是按xmal页面的控件的顺序在代码中如果想调整某些控件的顺序,可以在代码中使用KeyboardNavigation.SetTab ...
HTML：tab页签
小编最近在做项目的时候前端需要tab标签来进行角色分类,小编的公司用的是angular,虽然一般情况下angular挺好用的,但是这次例外了,angular的标签并不能良好的达到我想要的效果,于是 ...
HTML——tab标签
前言小编最近在做项目的时候前端需要tab标签来进行角色分类,小编的公司用的是angular,虽然一般情况下angular挺好用的,但是这次例外了,angular的标签并不能良好的达到我想要的效果 ...
csdn首页的那个新闻，blog，论坛，图书的tab签的做法，滑动门技术
问题内容:求助csdn首页的那个新闻,blog,论坛,图书的tab签的做法,滑动门技术原讨论链接:http://community.csdn.net/expert/topicview1.asp?id ...
网页中模拟Excel电子表格实例分享
2019独角兽企业重金招聘Python工程师标准>>> 原文来自http://www.6excel.com/doc/20049 一.电子表格中用到的快捷键: ← → ↑ ↓ :左, ...
爬虫、网页测试及 java servlet 测试框架等介绍
scrapy 抓取网页并存入 mongodb的完整示例: https://github.com/rmax/scrapy-redis https://github.com/geekan/scrapy-e ...
Uedit32高亮文件（加强）
替换根目录下 wordfile.txt / /L1"C/C++" C_LANG Line Comment = // Block Comment On = /* Block Comm ...
JavaScript打字小游戏
上半年自学了JavaScript,然后就做了个打字小游戏玩玩. 功能模块: 程序设计: 1.可选择游戏时间,显示倒计时 ...

focus-within switch tab

关键点

focus-within switch tab相关推荐

最新文章

热门文章