The :target selector allows us to interact with a fragment identifier, or hash, in our URL from CSS.

HTML:

<body>

    <a href="#tab1">Tab 1</a><a href="#tab2">Tab 2</a><a href="#tab3">Tab 3</a>

    <div id="tab1" class="tab">

        <h1>Tab 1 Content</h1>

    </div>

    <div id="tab2" class="tab">

        <h1>Tab 2 Content</h1>

    </div>

    <div id="tab3" class="tab">

        <h1>Tab 3 Content</h1>

    </div>

</body>

CSS:

    <style>

        .tab{

            display: none;

        }

        .tab:target {

            display: block;

        }

    </style>

[CSS3] CSS :target Selector的更多相关文章

  1. [CSS] :not Selector

    The CSS :not() selector allows us to exclude a subset of elements matched by our selector. In this e ...

  2. CSS3 & CSS var & :root

    CSS3 & CSS var & :root How to change CSS :root color variables in JavaScript https://stackov ...

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

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

  4. [CSS] Target empty elements using the :empty pseudo-class

    You can target an element that has no child elements by using the :empty pseudo-class. With browser ...

  5. [CSS3] CSS Media Queries

    Using CSS media queries allows you to design responsive layout in your web apps and website. We will ...

  6. [CSS3] CSS Display Property: Block, Inline-Block, and Inline

    Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...

  7. css :target

    花了半小时在找如果完成:target的问题 需求:点击<a href="#Main">Main</a>时,会触发:target 效果 结果在网络上没有找到, ...

  8. [CSS3] CSS Background Images

    Body with background image and gradient html { background: linear-gradient(#000, white) no-repeat; h ...

  9. [CSS] Target Positional Elements Using *-Of-Type CSS pseudo-classes

    Learn how to target elements based on their position inside of a parent element in relation to its s ...

随机推荐

  1. shell之sort

    转http://www.cnblogs.com/51linux/archive/2012/05/23/2515299.html) sort是在Linux里非常常用的一个命令,管排序的,集中精力,五分钟 ...

  2. spring mvc easyui tree 异步加载树

    使用spring mvc 注解 异步加载一棵树 jsp: <ul id="orgInfoTree"></ul> $(function(){ loadOrgT ...

  3. Bootstrap_Javascript_手风琴

    触发手风琴可以通过自定义的 data-toggle 属性来触发.其中data-toggle值设置为 collapse,data-target="#折叠区标识符". 第一步,设计一个 ...

  4. dedecms修改templets为别的名字

    修改templets模板文件夹的方法: 首先找到系统配置文件common.inc.php,此文件存放在Include目录下,打开common.inc.php来修改默认模板目录templets, 查找: ...

  5. angular 实现总价满100折扣

    <div ng-controller="CartController"> <div ng-repeat="item in items"> ...

  6. assert sys.modules[modname] is old_mod

    使用了pypiwin32 包中的pythoncom的时候,当跑在apache下,日志报错: [Thu Aug 27 17:06:44 2015] [error] [client 127.0.0.1] ...

  7. 化简复杂逻辑，编写紧凑的if条件语句

    当业务逻辑很复杂,涉及多个条件的真假,或者多种条件下都会执行同一动作时,如何编写紧凑的if语句呢?本文借由一个实际例子,利用数学的布尔逻辑整理条件,最终产生if语句. 问题 在<X3 重聚> ...

  8. WEB工程数据库相关安装脚本写作

    1. 数据库oracle安装 2. 数据库用户创建,表空间创建,表创建 #!/bin/bash current_path=`pwd` create_tablespace=${current_path} ...

  9. Node.js流

    什么是流? 流是可以从一个源读取或写入数据到连续的目标对象.在Node.js,有四种类型的数据流. Readable - 其是用于读操作. Writable - 用在写操作. Duplex - 其可以 ...

  10. 两个在线编写C++代码的网站

    第一个支持的编程语言很多,首推 http://ideone.com/ 第二个简单了点,不过可以通过email分享给朋友 http://codepad.org/ 试一试,可以用这两个网站提高自己编写代码 ...