trick：:target实现选项卡切换

谁借莪１个温暖的怀抱￠ 2022-08-05 02:27 224阅读 0赞

### :target是什么？ ###

MDN是这样描述的：[:target][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中，可以设置锚链接，举个粟子：

<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

:target{ color:red; }
    #tab:target::after{ content:"tab1" }

点击锚链接，对应链接的div的文本变成红色，另外，给\#tab后面插入一个文本。（ps:关于content属性用法：[CSS3的content属性详解][CSS3_content]）  
效果猛戳：[https://jsfiddle.net/dwqs/cL8rawov/][https_jsfiddle.net_dwqs_cL8rawov]  
应该大致明白了:target的含义了吧，如果不知道用，看看这篇文章：[Using the :target selector][Using the _target selector]

### :target可以做什么 ###

最简单的用处：利用:target实现选项卡切换。  
HTML：

CSS:

.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].  
你自己也可以脑洞大开一下，哈哈。

### 浏览器支持 ###

对于:target伪类，浏览器支持情况还是不错的。  
![:target][target 1]  
具体可以戳:[:target][target 2]

原文链接：[http://www.ido321.com/1567.html][http_www.ido321.com_1567.html]

[target]: https://developer.mozilla.org/en-US/docs/Web/CSS/:target
[CSS3_content]: http://www.ido321.com/1555.html
[https_jsfiddle.net_dwqs_cL8rawov]: https://jsfiddle.net/dwqs/cL8rawov/
[Using the _target selector]: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_the_:target_selector
[Demo]: http://jsfiddle.net/dwqs/7eb9u0mq/
[target 1]: http://7u2nae.com1.z0.glb.clouddn.com/target.png
[target 2]: http://caniuse.com/#search=%3Atarget
[http_www.ido321.com_1567.html]: http://www.ido321.com/1567.html