实用CSS3属性之 :target伪类实现Tab切换效果
2023-09-14 08:59:53 时间
CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue}
浏览器支持:
不支持IE8及以下的IE版本,IE9支持这个属性,其它非IE内核浏览器如:Firefox、Chrome、等这些浏览器都支持。
用法:
:target伪类与:hover、:link、:visited、:focus等伪类的用法一样
:target {color:blue}
实例:CSS3 :target伪类实现Tab切换效果
下面简单介绍下如何用csse :target来制作一个无JavaScript的tab切换效果
HTML代码:
<div class="tablist"> <ul class="tabmenu"> <li><a href="#tab1">标签一</a></li> <li><a href="#tab2">标签二</a></li> <li><a href="#tab3">标签三</a></li> </ul> <div id="tab1" class="tab_content">tab1 content</div> <div id="tab2" class="tab_content">tab2 content</div> <div id="tab3" class="tab_content">tab3 content</div> </div>
CSS代码:
.tab_content { position: absolute; } #tab1:target, #tab2:target, #tab3:target { z-index: 1; }
原理其实很简单,就是把tab元素设为绝对对定位absolute,再通过:target伪类改变它们的层级(z-index)。
相关文章
- [web 前端] css3 transform方法常用属性
- [web前端] css3 transition属性实现3d动画效果
- js 获取和设置css3 属性值的实现方法
- .NET之特性和属性
- css3新增属性有哪些?css3中常用的新增属性总结
- 【原】常见CSS3属性对ios&android&winphone的支持
- Linux线程属性总结
- Flexbox属性可视化指南
- css 属性选择器
- Angular Component 开发时属性和运行时属性的对照
- css3很好玩的属性值attr
- Android 实现Java更改ImageView的src属性
- 【Android Gradle 插件】LintOptions 配置 ⑪ ( textReport 属性配置 | textOutput 属性配置 )
- JAVA学习绘图颜色及其笔画属性设置字体显示文字
- CSS3转换属性—transform之translate、rotate、scale函数详解
- 药物分子关于RO5等常用属性计算(LogP, TPSA, MW, QED....)