是不是觉得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切换）的更多相关文章

  1. CSS3 target伪类简介

    CSS3 target伪类是众多实用的CSS3特性中的一个.它用来匹配文档(页面)的URI中某个标志符的目标元素.具体来说,URI中的标志符通常会包含一个”#”字符,然后后面带有一个标志符名称,比如# ...

  2. CSS3 :target伪类的理解与使用

    CSS3 :target伪类用来改变页面中锚链接URL所指向的ID元素的样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏 ...

  3. 巧用CSS3 :target 伪类制作Dropdown下拉菜单（无JS）

    :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为 ...

  4. CSS3 :target伪类实现Tab切换效果

    用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...

  5. CSS3 :target伪类实现Tab切换效果 BY commy

    http://www.shejidaren.com/examples/css3-target/css3-target.html#tab1 标签一 标签二 标签三 欢迎加设计达人Q群:50063010设 ...

  6. 实用CSS3属性之 :target伪类实现Tab切换效果

    CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏览器支 ...

  7. CSS3属性之 target伪类实现Tab切换效果

    CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式 代码示例: <!DOCTYPE html> <html lang="en"> < ...

  8. 巧用CSS3：target 伪类制作Dropdown下拉菜单（无JS）

    原文链接:http://devework.com/css3-target-dropdown.html :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如 ...

  9. CSS3 target 选择器_:target伪类的使用

    target作为目标伪类选择器,是css3中的新特性之一,目前已经支持所有主流浏览器,除了 IE8 及更早的版本.target伪类的主要是用于匹配文档中uri中某个标志符的目标元素,具体来说,uri中 ...

随机推荐

  1. Linux下安装LANMP环境

    记录下来,方便下次再用时从头查找资料 首先是操作系统和php环境:CentOS 6.5 64位(之所以不是7.0是因为本身对linux不熟,而7.0改变挺大的,搜索查询资料也不好搜索),Php版本:5 ...

  2. mysql中explain优化分析

    效率比较  range >index  > all

  3. jquery easy ui 学习 （6） basic validatebox

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. winform 绘制label 中文字 - 摘

    private void label2_Paint(object sender, PaintEventArgs e) {//绘制label中文字 string text = "Sri Lan ...

  5. Azure IoT

    微软Azure IoT   国外物联网平台初探(二)——微软Azure IoT 马智 平台定位 连接设备.其它 M2M 资产和人员,以便在业务和操作中更好地利用数据. 连接 IoT 设备 将所有设备连 ...

  6. Docker - 通过swarm 管理 docker service

    创建一个 Docker service $ docker service create --replicas 1 --name myhelloworld alpine ping docker.com ...

  7. Python——学习笔记

    list  ['','',''] 类似PHP数组   可以修改 tuple  ('','')  不能修改其中的元素 切片 list[int 开始: int 结束: int 间隔=1] 字符串也可以看成 ...

  8. Swift中使用构建配置来支持条件编译-b

    在Objective-C中,我们经常使用预处理指令来帮助我们根据不同的平台执行不同的代码,以让我们的代码支持不同的平台,如: 1 2 3 4 5 6 7 8 9 #if TARGET_OS_IPHON ...

  9. 蓝牙-b

    最近智能家居比较火,好多公司开始开发通过蓝牙对智能家居进行连接控制!下面,我就把自己总结的蓝牙方面的知识分享一下!求吐槽!!!!O(∩_∩)O... 1.导入头文件#import <CoreBl ...

  10. PS微观效果

    贴入命令必须在建立选区的情况下,然后设置图层的混合模式为“叠加”,这个是必须的. 专业相机的移轴镜头效果很好……PS搞出的不行 原素材如下(去云台山时照的): 打开渐变工具,在快速蒙版模式下选人,然后 ...