是不是觉得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. Websocket 与代理服务器如何交互？ How HTML5 Web Sockets Interact With Proxy Servers

    How HTML5 Web Sockets Interact With Proxy Servers Posted by Peter Lubberson Mar 16, 2010 With the re ...

  2. jQuery判断浏览器

    在jQuery1.9版本之前,jQuery 提供了 browser 标记 <script type="text/javascript" src="http://aj ...

  3. ASP.NET程序从IIS6移植到IIS7时出现500.22错误

    最可能的原因:  •    此应用程序在 system.web/httpModules 节中定义配置.  可尝试的操作:  •    将配置迁移到 system.webServer/modules 节 ...

  4. A题

    A - A Time Limit:1000MS     Memory Limit:131072KB     64bit IO Format:%I64d & %I64u   Descriptio ...

  5. 上海招聘FPGA讲师(专兼职均可)

    上海招聘FPGA讲师(专兼职均可) 招聘FPGA培训讲师(专兼职均可) 诚聘FPGA培训讲师_软件无线电方向 ◆精通FPGA设计方法及技巧 ◆精通无线电知识及System View设计方法,有基于Sy ...

  6. SANS top 20

    What Are the Controls?The detailed Consensus Audit Guidelines are posted at http://www.sans.org/cag/ ...

  7. Nginx+Keepalived主备切换（包含nginx服务停止）

    原文地址:http://blog.sina.com.cn/s/blog_79ac6aa80101bmed.html Nginx+Keepalived主备切换(包含nginx服务停止) 环境: VM中4 ...

  8. Android应用开发学习之图片切换器

    作者:刘昊昱 博客:http://blog.csdn.net/liuhaoyutz 如果我们要实现类似Windows的照片查看器切换上一张下一张照片的效果,可以使用图片切换器ImageSwitcher ...

  9. 百度地图API 重新生成点聚合的功能

    百度点聚合用来解决加载大量点要素到地图上产生覆盖现象的问题,并提高性能. http://api.map.baidu.com/library/MarkerClusterer/1.2/docs/symbo ...

  10. python_Opencv_绘图

    opencv中也可以用一些函数来绘图 直接上源码,例子: # -*- coding: utf-8 -*- import numpy as np import cv2 # 黑色的图片 img=np.ze ...