htmltab按钮3种纯CSS方法实现Tab 切换

3种纯CSS办法实现Tab 切换

纯CSS实现都面临2个问题：

1、 如何吸收点击事宜？

2、 如何操作干系DOM？

拥有 checked 属性的表单元素， <input type=\公众radio\"大众> 或者 <input type=\公众checkbox\公众> 能够吸收到点击事宜。

知识点:

1、 利用 radio 标签的 :checked 伪类，加上 <label for> 实现纯 CSS 捕获点击事情

2、 利用了 ~ 选择符对样式进行掌握

<div class=\"大众container\"大众> <input class=\公众nav1\公众 id=\"大众li1\"大众 type=\"大众radio\"大众 name=\"大众nav\"大众> <input class=\"大众nav2\"大众 id=\公众li2\"大众 type=\公众radio\"大众 name=\"大众nav\公众> <ul class='325dc17dfbb11e19 nav'> <li class='c17dfbb11e19cd9c active'><label for=\"大众li1\公众>tab1</label></li> <li><label for=\公众li2\公众>tab2</label></li> </ul> <div class=\"大众content\公众> <div class=\公众content1 default\公众>tab1 内容:123456</div> <div class=\"大众content2\"大众>tab2 内容:abcdefgkijkl</div> </div> </div>

添加样式

.container { padding: 0; margin: 0; } .container { position: relative; width: 400px; margin: 50px auto; } .container input { display: none; } .nav { position: relative; overflow: hidden; } .nav li { width: 200px; float: left; text-align: center; background: #ddd; list-style: none; } .nav li label { display: block; width: 200px; line-height: 36px; font-size: 18px; cursor: pointer; } .content { position: relative; overflow: hidden; width: 400px; height: 100px; border: 1px solid #999; box-sizing: border-box; padding: 10px; } .content1, .content2 { display: none; width: 100%; height: 100%; } .nav1:checked ~ .nav li { background: #ddd; color: #000; } .nav1:checked ~ .nav li:first-child { background: #ff7300; color: #fff; } .nav2:checked ~ .nav li { background: #ddd; color: #000; } .nav2:checked ~ .nav li:last-child { background: #ff7300; color: #fff; } .nav1:checked ~ .content > div { display: none; } .nav1:checked ~ .content > div:first-child { display: block; } .nav2:checked ~ .content > div { display: none; } .nav2:checked ~ .content > div:last-child { display: block; } .nav li.active { background: #ff7300; color: #fff; } .content .default { display: block; }target 伪类实现纯 CSS Tab 切换

知识点:

1、 要利用 :target 伪元素，须要 HTML 锚点，以及锚点对应的 HTML 片段

2、 核心是利用 :target 伪类吸收点击事宜

3、 通过兄弟选择符 ~ 掌握样式

<div class=\公众container\"大众> <div id=\公众content1\公众 class=\公众active\"大众>tab 1内容:123456</div> <div id=\"大众content2\"大众>tab 2内容:abcdefgkijkl</div> <ul class='fbb11e19cd9c2327 nav'> <li class=\"大众active\公众><a href=\"大众#content1\公众>tab1</a></li> <li><a href=\公众#content2\"大众>tab2</a></li> </ul> <div class=\"大众wrap\"大众></div> </div>

添加样式

.container { padding: 0; margin: 0; } .container { position: relative; width: 400px; margin: 50px auto; } .nav { position: relative; overflow: hidden; } li { width: 200px; float: left; text-align: center; background: #ddd; list-style: none; } li a { display: block; width: 200px; line-height: 36px; font-size: 18px; cursor: pointer; text-decoration: none; color: #000; } #content1, #content2 { position: absolute; overflow: hidden; top: 36px; width: 400px; height: 100px; border: 1px solid #999; box-sizing: border-box; padding: 10px; } #content1, #content2 { display: none; width: 100%; background: #fff; } #content1:target, #content2:target { display: block; } #content1.active { display: block; } .active ~ .nav li:first-child { background: #ff7300; color: #fff; } #content1:target ~ .nav li { background: #ddd; color: #000; } #content1:target ~ .nav li:first-child { background: #ff7300; color: #fff; } #content2:target ~ .nav li { background: #ddd; color: #000; } #content2:target ~ .nav li:last-child { background: #ff7300; color: #fff; } .wrap { position: absolute; overflow: hidden; top: 36px; width: 400px; height: 100px; border: 1px solid #999; box-sizing: border-box; }focus-within 来实现 tab 切换功能

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

重点：它或它的后代得到焦点。

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

知识点

1、 这个属性有点类似 Javascript 的事宜冒泡，从可获焦元素开始一贯冒泡到根元素 html，都可以吸收触发 :focus-within 事宜

2、 本例子的思路便是通过获焦态来掌握其他选择器，以及最主要的是利用了父级的 :not(:focus-within) 来设置默认样式

<div class=\"大众container\公众> <div class=\公众nav-box\"大众> <button class=\公众nav1\"大众>tab1</button> <button class=\"大众nav2\"大众>tab2</button> <div class=\"大众content-box\"大众> <div class=\"大众content1\公众> content-1 </div> <div class=\"大众content2\"大众> content-2 </div> </div> </div> </div>

添加样式

.container { width: 300px; margin: 50px auto; padding: 10px; boder: 1px solid #ddd; } .nav-box { font-size: 0; } button { width: 150px; height: 40px; box-sizing: border-box; outline: none; background: #fff; border: 1px solid #ddd; font-size: 18px; cursor: pointer; } button:focus-within { color: #fff; background: #ff7300; } .content-box { font-size: 24px; border: 1px solid #ddd; height: 100px; } .content-box div { display: none; } .nav-box:not(:focus-within) .nav1 { color: #fff; background: #ff7300; } .nav-box:not(:focus-within) .content1 { display: block; } .nav1:focus-within ~ .content-box .content1 { display: block; } .nav2:focus-within ~ .content-box .content2 { display: block; }

3种纯CSS办法实现Tab 切换

这个效果就很差一些，由于，在tab失落去焦点时，就会复原，回到tab1上面，并不推举这种办法来实现。

源码地址和源文件下载请点击下方“理解更多”