是不是觉得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. jQuery中事件的学习

    刚学习了jQuery中的事件,主要通过bind(),toggle(),hover()来主要实现,下面先说一说关于bind的想关要点. 1.bind方法. bind方法的主要参数为bind(type,f ...

  2. 用webclient.DownloadFile下载exe文件时大小为0

    用自己写的下载软件从服务器端下载文件,别的文件能下,但exe文件显示下载文件大小为0,连接超时,原因是服务上发布的下载文件夹的虚拟目录的属性有问题, 包含.exe 文件的虚拟目录已启用执行应用程序权限 ...

  3. JS 操作Dom节点之CURD

    许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document. ...

  4. Powerpoin怎么制作电子相册|PPT制作电子相册教程

    Powerpoin怎么制作电子相册?你是不是也对这一问题颇感兴趣呢?下面小编就为大家带来PPT制作电子相册详细教程,赶紧准备好你的自拍照什么的,开启Powerpoin制作电子相册之旅吧! Powerp ...

  5. UI基础 - UITabBarController

    self.window = [[UIWindow alloc] init]; self.window.frame = [UIScreen mainScreen].bounds; oneViewCont ...

  6. Logger之Logger.getLogger(CLass)

    之前一直在使用System.out.println()来调试.但是用这种方式开发项目部署到生产环境,会因为众多的控制台输出降低应用的性能.这时候Log4J就成为可平衡开发和部署应用的利器了. 在项目中 ...

  7. poj 2886Who Gets the Most Candies?

    http://poj.org/problem?id=2886 #include <cstdio> #include <cstring> #include <algorit ...

  8. 【转】（DT系列四）驱动加载中, 如何取得device tree中的属性

    原文网址:http://www.cnblogs.com/biglucky/p/4057488.html 本文以At91rm9200平台为例,从源码实现的角度来分析驱动加载时,Device tree的属 ...

  9. SharePoint Server 2010安装图解

    SharePoint Server 2010作为MOSS 2007的升级版本,自从2009年底发布Beta版本以来就备受关注,网络上已经出现了很多相关的文章,其中也不乏中文的信息. 最近SharePo ...

  10. Scala 编程（一）Scala 编程总览

    Scala 简介 Scala 属于“可伸展语言”,源于它可以随使用者的需求而改变和成长.Scala 可以应用在很大范围的编程任务上,小到脚本大到建立系统均可以. Scala 跑在标准 Java 平台上 ...