使用CSS3实现选项卡切换的方法
:target是什么?
MDN是这样描述的::target
The :target pseudo-class represents the unique element, if any, with an id matching the fragment identifier of the URI of the document.
在document中,可以设置锚链接,举个例子:
CSS Code 复制内容到剪贴板 <a href="#tab">Test :target</a> <a href= "#tab2" >Test 2: target</a> <div id= "tab" >This is a tab.</div> <div id= "tab2" >This is another tab.</div>上面存在两个锚链接:#tab和t#ab2。当点击锚链接时,就会跳到对应的div,则::target就是给这些div用的。添加一下CSS
CSS Code 复制内容到剪贴板 :target{ color : red ; } #tab :target::after{ content : "tab1" }点击锚链接,对应链接的div的文本变成红色,另外,给#tab后面插入一个文本。
效果猛戳:https://jsfiddle.net/dwqs/cL8rawov/
应该大致明白了:target的含义了吧~
:target可以做什么
最简单的用处:利用:target实现选项卡切换。
HTML:
XML/HTML Code 复制内容到剪贴板 <div class="tab-control"> < a href = "#tab1" > tab1 </ a > < a href = "#tab2" > tab2 </ a > < a href = "#tab3" > tab3 </ a > </ div > < div class = "tabs" > < div id = "tab1" class = "tab" > This is a tab1 </ div > < div id = "tab2" class = "tab" > This is a tab2 </ div > < div id = "tab3" class = "tab" > This is a tab3 </ div > </ div >
CSS:
CSS Code 复制内容到剪贴板 .tab-control a{ display : inline - block ; text-decoration : none ; color : #FFF ; height : 20px ; width : 40px ; text-align : center ; line-height : 20px ; background :rgba(70,121,189,0.75); } .tab-control a:hover{ background :rgba(70,121,189,1); } .tabs{ position : relative ; border : 1px solid red ; height : 200px ; width : 135px ; overflow : hidden ; } .tab{ height :100%; width :100%; } :target{ display : block ; }看看效果:Demo
当然,:target的功能不仅局限于此。隐藏元素、创建lightbox 等。MDN上给了很多个demo:more demo.
你自己也可以脑洞大开一下,哈哈。
浏览器支持
对于:target伪类,浏览器支持情况还是不错的。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。