是不是觉得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. underscorejs-invoke学习

    2.13 invoke 2.13.1 语法: _.invoke(list, method, *args) 2.13.2 说明: 每个list属性值都执行method方法,根据method方法返回一个数 ...

  2. K-means聚类

    聚类算法,无监督学习的范畴,没有明确的类别信息. 给定n个训练样本{x1,x2,x3,...,xn} kmeans算法过程描述如下所示: 1.创建k个点作为起始质心点,c1,c2,...,ck 2.重 ...

  3. [ JS 进阶 ] 如何改进代码性能 (3)

    原文链接 总结一下 1.减少操作dom的次数 2.需要多次使用某全局变量的时候,将其赋给一个局部变量,避免重复查找 3.优化循环 4.多用逗号和直接赋值的方式来var,减少工厂方式和构造函数方式创建对 ...

  4. Codeforces 138D World of Darkraft

    有一个n*m 的棋盘,每个点上标记了L,R,X 中的一个每次能选择一个没有被攻击过的点(i,j),从这个点开始发射线,射线形状为:1. 若字符是 L,向左下角和右上角发,遇到被攻击过的点就停下来2. ...

  5. lucene拼写检查模块

    Lucene是Apache发布的开源搜索引擎开发工具包,不仅提供了核心的搜索功能,还提供了许多其他功能插件,例如:拼写检查功能模块. 搜索拼写检查模块实现类在lucene-suggest-x.xx.x ...

  6. C51指针小结

    一. 指针变量的定义 指针变量定义与一般变量的定义类似,其形式如下: 数据类型 [存储器类型1] * [存储器类型2] 标识符: [存储器类型1] 表示被定义为基于存储器的指针.无此选项时,被定义为一 ...

  7. hibernate和struts2实现分页功能

    1.DAO层接口的设计,定义一个PersonDAO接口,里面声明了两个方法: public interface PersonDAO { public List<Person> queryB ...

  8. new Random().nextInt

    public static void main(String[] args) { System.out.println(new Random().nextInt(0)); } Exception in ...

  9. cryptopp开源库的使用（零）：windows下使用visual studio编译

    编译相当简单:打开目录下的sln文件直接编译即可,官方支持到vc2012,我使用vs2013也没有错误,优秀的开源库总是便于使用. 编译的时候注意运行库得选择需要跟使用该库的保持一致,否则会出现重定义 ...

  10. PHP IDE 框架 服务器 相关

    server:nginx  框架:一个比较老的项目用的ZendFramework,最近的新项目用的codeigniter  IDE:  zend studio  Sublime Text https: ...