帝王谷资源网 Design By www.wdxyy.com
: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.
你自己也可以脑洞大开一下,哈哈。
浏览器支持
标签:
CSS3,选项卡
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
更新日志
2024年10月07日
2024年10月07日
- 群星《前途海量 电影原声专辑》[FLAC/分轨][227.78MB]
- 张信哲.1992-知道新曲与精丫巨石】【WAV+CUE】
- 王翠玲.1995-ANGEL【新艺宝】【WAV+CUE】
- 景冈山.1996-我的眼里只有你【大地唱片】【WAV+CUE】
- 群星《八戒 电影原声带》[320K/MP3][188.97MB]
- 群星《我的阿勒泰 影视原声带》[320K/MP3][139.47MB]
- 纪钧瀚《胎教古典音乐 钢琴与大提琴的沉浸时光》[320K/MP3][148.91MB]
- 刘雅丽.2001-丽花皇后·EMI精选王【EMI百代】【FLAC分轨】
- 齐秦.1994-黄金十年1981-1990CHINA.TOUR.LIVE精丫上华】【WAV+CUE】
- 群星.2008-本色·百代音乐人创作专辑【EMI百代】【WAV+CUE】
- 群星.2001-同步过冬AVCD【环球】【WAV+CUE】
- 群星.2020-同步过冬2020冀待晴空【环球】【WAV+CUE】
- 沈雁.1986-四季(2012梦田复刻版)【白云唱片】【WAV+CUE】
- 纪钧瀚《胎教古典音乐 钢琴与大提琴的沉浸时光》[FLAC/分轨][257.88MB]
- 《国语老歌 怀旧篇 3CD》[WAV/分轨][1.6GB]