博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
实用CSS3属性之 :target伪类实现Tab切换效果
阅读量:5935 次
发布时间:2019-06-19

本文共 623 字,大约阅读时间需要 2 分钟。

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代码:

tab1 content
tab2 content
tab3 content

CSS代码:

.tab_content {	position: absolute;}#tab1:target, #tab2:target, #tab3:target {	z-index: 1;}

原理其实很简单,就是把tab元素设为绝对对定位absolute,再通过:target伪类改变它们的层级(z-index)。

转载地址:http://hujtx.baihongyu.com/

你可能感兴趣的文章
【转】java-String中的 intern()
查看>>
用户登录系统之后,禁止用户返回到登录页面
查看>>
java.lang.NoClassDefFoundError: javax/mail/Authenticator
查看>>
数据库多对多型数据表分类设计
查看>>
深入Activity,Activity启动模式LaunchMode完全解析
查看>>
黄聪:iis7.5 偶尔出现500服务器错误-内部服力器错误
查看>>
CSS3与页面布局学习总结
查看>>
驱动的境界
查看>>
sql 转 markdown
查看>>
Noise,Error,wighted pocket Algorithm
查看>>
hive内部表、外部表、分区表、视图
查看>>
人工智能--学术会议排名
查看>>
轻量级C#编辑器RoslynPad
查看>>
[Asp.net mvc]OutputCacheAttribute
查看>>
html布局小练习(百度首页)
查看>>
lmdb简介——结合MVCC的B+树嵌入式数据库
查看>>
浏览器对localstorage的支持情况以及localstorage在saas系统中的应用实践思考
查看>>
rsync常用参数详解
查看>>
(转)能根据文字生成图片的 GAN,深度学习领域的又一新星
查看>>
回顾2016展望2017
查看>>