3种纯CSS方式实现Tab 切换 |
您所在的位置：网站首页 › css写选项卡 › 3种纯CSS方式实现Tab 切换 |
3种纯CSS方式实现Tab 切换
|
前言 Tab 切换是种很常见的网页呈现形式，不管是PC或者H5都会经常看到，今天就为小伙伴们提供多种纯CSS Tab 切换的实现方式，同时对比一下那种代码更方便，更通俗易懂。  3种纯CSS方式实现Tab 切换纯CSS实现都面临2个问题： 1、 如何接收点击事件？ 2、 如何操作相关DOM？ checked 伪类实现纯 CSS Tab 切换拥有 checked 属性的表单元素， 或者 能够接收到点击事件。 知识点: 1、 使用 radio 标签的 :checked 伪类，加上 实现纯 CSS 捕获点击事情 2、 使用了 ~ 选择符对样式进行控制 代码语言：javascript复制 .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; } tab1 tab2 tab1 内容:123456 tab2 内容:abcdefgkijkl target 伪类实现纯 CSS Tab 切换知识点: 1、 要使用 :target 伪元素，需要 HTML 锚点，以及锚点对应的 HTML 片段 2、 核心是使用 :target 伪类接收点击事件 3、 通过兄弟选择符 ~ 控制样式 代码语言：javascript复制 .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; } tab 1内容:123456 tab 2内容:abcdefgkijkl tab1 tab2 focus-within 来实现 tab 切换功能:focus-within 它表示一个元素获得焦点，或该元素的后代元素获得焦点。重点：它或它的后代获得焦点。 这也就意味着，它或它的后代获得焦点，都可以触发 :focus-within。 知识点 1、 这个属性有点类似 Javascript 的事件冒泡，从可获焦元素开始一直冒泡到根元素 html，都可以接收触发 :focus-within 事件 2、 本例子的思路就是通过获焦态来控制其他选择器，以及最重要的是利用了父级的 :not(:focus-within) 来设置默认样式 代码语言：javascript复制 .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; } tab1 tab2 content-1 content-23种纯CSS方式实现Tab 切换这个效果就很差一些，因为，在tab失去焦点时，就会复原，回到tab1上面，并不推荐这种方式来实现。小编推荐第一种:checked实现方式，更容易理解。 |
【本文地址】
今日新闻 |
推荐新闻 |