CSS3 target 伪类不得不说那些事儿(纯CSS实现tab切换)
是不是觉得target有点眼熟?!
今天要讲的不是HTML的<a>标签里面有个target属性。
target伪类是css3的新属性。
说到伪类,对css属性的人肯定都知道:hover、:link、:visited、:focus等等,target用法跟他们是同出一辙的。
官方定义是:
URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
:target 选择器可用于选取当前活动的目标元素。
如果你是第一次看到这个定义,是不是有点懵?!没关系~程序员要用代码来交流。举个栗子。
<!DOCTYPE html>
<html>
<head>
<style>
:target
{
border: 2px solid blue;
background-color: yellow;
}
</style>
</head>
<body> <p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p> <p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p> </body>
</html>
看完代码是不是没feel?~That's all right.一起来看效果图。
初始化是这样的:
当我点击“跳转至内容 1”的时候,变成了这样:
有木有feel到target跟其他伪类的与众不同?!
哈哈~来,直接切入要讲的主题!!!
利用target的特性,可以实现纯css的tab效果切换。
利用target的特性,可以实现纯css的tab效果切换。
利用target的特性,可以实现纯css的tab效果切换。
(重要事情说三遍!)
code如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style> .tabmenu {
position:absolute;
top:100%;
margin:0;
}
.tabmenu li{
display:inline-block;
}
.tabmenu li a {
display:block;
padding:5px 10px;
margin:0 10px 0 0;
border:1px solid #91a7b4;
border-radius:0 0 5px 5px;
background:#e3f1f8;
color:#333;
text-decoration:none;
} .tablist {
position:relative
;margin:50px auto;
min-height:200px;
} .tab_content {
position: absolute;
width:600px;
height:170px;
padding:15px;
border:1px solid #91a7b4;
border-radius:3px;
box-shadow:0 2px 3px rgba(0,0,0,0.1);
font-size:1.2em;
line-height:1.5em;
color:#666;
background:#fff;
} #tab1:target, #tab2:target, #tab3:target {
z-index: 1;
}
</style>
</head>
<body>
<div class="tablist">
<ul class="tabmenu">
<li><a href="#tab1">tab1</a></li>
<li><a href="#tab2">tab2</a></li>
<li><a href="#tab3">tab3</a></li>
</ul>
<div id="tab1" class="tab_content">tab1</div>
<div id="tab2" class="tab_content">tab2tab2</div>
<div id="tab3" class="tab_content">tab3tab3tab3</div>
</div>
</body>
</html>
效果图如下:
最关键的代码:
先根据target的特性锚链接到对应的div,再根据z-index的属性,改变div的层级关系,从而实现tab的切换效果!
(当然,首先,你要懂z-index属性的特点。)
最后提一下兼容性问题:因为这是CSS3新特性,所以不兼容老版本的浏览器,例如IE678。。。
CSS3 target 伪类不得不说那些事儿(纯CSS实现tab切换)的更多相关文章
- CSS3 target伪类简介
CSS3 target伪类是众多实用的CSS3特性中的一个.它用来匹配文档(页面)的URI中某个标志符的目标元素.具体来说,URI中的标志符通常会包含一个”#”字符,然后后面带有一个标志符名称,比如# ...
- CSS3 :target伪类的理解与使用
CSS3 :target伪类用来改变页面中锚链接URL所指向的ID元素的样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏 ...
- 巧用CSS3 :target 伪类制作Dropdown下拉菜单(无JS)
:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为 ...
- CSS3 :target伪类实现Tab切换效果
用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...
- CSS3 :target伪类实现Tab切换效果 BY commy
http://www.shejidaren.com/examples/css3-target/css3-target.html#tab1 标签一 标签二 标签三 欢迎加设计达人Q群:50063010设 ...
- 实用CSS3属性之 :target伪类实现Tab切换效果
CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏览器支 ...
- CSS3属性之 target伪类实现Tab切换效果
CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式 代码示例: <!DOCTYPE html> <html lang="en"> < ...
- 巧用CSS3:target 伪类制作Dropdown下拉菜单(无JS)
原文链接:http://devework.com/css3-target-dropdown.html :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如 ...
- CSS3 target 选择器_:target伪类的使用
target作为目标伪类选择器,是css3中的新特性之一,目前已经支持所有主流浏览器,除了 IE8 及更早的版本.target伪类的主要是用于匹配文档中uri中某个标志符的目标元素,具体来说,uri中 ...
随机推荐
- 使用HTML+CSS,jQuery编写的简易计算器
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- (git fetch git push git pull)远程本地分支互相推送更新
git push origin bug_huiyuan:mobile_attribution 把bug_huiyuan(本地分支) 推送到 远程mobile_attribution分支 git pus ...
- 牛人总结python中string模块各属性以及函数的用法,果断转了,好东西
http://blog.chinaunix.net/uid-25992400-id-3283846.html http://blog.csdn.net/xiaoxiaoniaoer1/article/ ...
- select查询的性能
为什么忘记commit也会造成select查询的性能问题 今天遇到一个很有意思的问题,一个开发人员反馈在测试服务器ORACLE数据库执行的一条简单SQL语句非常缓慢,他写的一个SQL没有返回任何数据, ...
- 运行Capture.exe找不到cdn_sfl401as.dll
今天运行capture Orcad16.6显示缺少cdn_sfl401as.dll,昨天运行时并没有发现这种情况,回想今天安装了modelsim之后才发生这种情况,于是将modelsim卸载掉,再次启 ...
- mapreduce (二) MapReduce实现倒排索引(一) combiner是把同一个机器上的多个map的结果先聚合一次
1 思路:0.txt MapReduce is simple1.txt MapReduce is powerfull is simple2.txt Hello MapReduce bye MapRed ...
- android.support.design.widget.AppBarLayout 在android5.0+底部显示空白条问题
在最外层使用 RelativeLayout作为根节点,同时设置 android:fitsSystemWindows="true"问题解决. <?xml version=&qu ...
- vijosP1499炸毁燃料库
背景 某天,外星人展开了对地球的侵略,OIer们开始与之周旋... 描述 外星人派出了172849个外星人乘着UFO来到地球,curimit神new带领着OIer们奋力抵抗.curimit神new觉得 ...
- GOTO (Transact-SQL)
将执行流更改到标签处. 跳过 GOTO 后面的 Transact-SQL 语句,并从标签位置继续处理. GOTO 语句和标签可在过程.批处理或语句块中的任何位置使用. GOTO 语句可嵌套使用. 语法 ...
- 9. memcpy() memccpy() memmove() strcpy() memset()
部分参考: http://www.cppblog.com/kang/archive/2009/04/05/78984.html 表头文件: #include <string.h>定义函数: ...