是不是觉得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. 使用HTML+CSS，jQuery编写的简易计算器

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  2. (git fetch git push git pull)远程本地分支互相推送更新

    git push origin bug_huiyuan:mobile_attribution 把bug_huiyuan(本地分支) 推送到 远程mobile_attribution分支 git pus ...

  3. 牛人总结python中string模块各属性以及函数的用法，果断转了，好东西

    http://blog.chinaunix.net/uid-25992400-id-3283846.html http://blog.csdn.net/xiaoxiaoniaoer1/article/ ...

  4. select查询的性能

    为什么忘记commit也会造成select查询的性能问题 今天遇到一个很有意思的问题,一个开发人员反馈在测试服务器ORACLE数据库执行的一条简单SQL语句非常缓慢,他写的一个SQL没有返回任何数据, ...

  5. 运行Capture.exe找不到cdn_sfl401as.dll

    今天运行capture Orcad16.6显示缺少cdn_sfl401as.dll,昨天运行时并没有发现这种情况,回想今天安装了modelsim之后才发生这种情况,于是将modelsim卸载掉,再次启 ...

  6. mapreduce (二) MapReduce实现倒排索引(一) combiner是把同一个机器上的多个map的结果先聚合一次

    1 思路:0.txt MapReduce is simple1.txt MapReduce is powerfull is simple2.txt Hello MapReduce bye MapRed ...

  7. android.support.design.widget.AppBarLayout 在android5.0+底部显示空白条问题

    在最外层使用 RelativeLayout作为根节点,同时设置 android:fitsSystemWindows="true"问题解决． <?xml version=&qu ...

  8. vijosP1499炸毁燃料库

    背景 某天,外星人展开了对地球的侵略,OIer们开始与之周旋... 描述 外星人派出了172849个外星人乘着UFO来到地球,curimit神new带领着OIer们奋力抵抗.curimit神new觉得 ...

  9. GOTO (Transact-SQL)

    将执行流更改到标签处. 跳过 GOTO 后面的 Transact-SQL 语句,并从标签位置继续处理. GOTO 语句和标签可在过程.批处理或语句块中的任何位置使用. GOTO 语句可嵌套使用. 语法 ...

  10. 9. memcpy() memccpy() memmove() strcpy() memset()

    部分参考: http://www.cppblog.com/kang/archive/2009/04/05/78984.html 表头文件: #include <string.h>定义函数: ...