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. html中的空格可以用什么代替

    半角空格用 代替,全角的空格可以直接在网页里生效. 打全角空格的两种方法:1.智能ABC按v1,选择第一个2.按shift+空格切换输入法的“半.全角”状态为全角再按空格

  2. c# winfrom 委托实现窗体相互传值

    利用委托轻松实现,子窗体向父窗体传值. 子窗体实现代码: //声明委托 public delegate void MyDelMsg(string msg); //定义一个委托变量 public MyD ...

  3. php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)

    网上有很多php文件上传的类,文件上传处理是php的一个特色(至少手册上是将此作为php特点来展示的,个人认为php在数组方面的优异功能更有特 色),学php的人都知道文件上传怎么做,但很多人在编程中 ...

  4. php学习之基础语法

    这些语法都是在学习视频的过程中整理出来的,有些很简单的语法可能就没有整理了,只是记录了自己看来比较重要的语法内容.   1.变量使用 $ 声明 ,变量区分大小写   变量的类型:      4种标量类 ...

  5. Mysql访问 for橙子小海

    package com.mvc.model.dao; import com.mvc.model.daoutil.DBConn; import com.mvc.model.entity.Blog; 这是 ...

  6. Trigger model Trigger expr_id in WorkFolow

    For example, suppose you want to set a Sale Order into the state "Done" once it has been s ...

  7. iOS9 以上的真机调试 不用证书

    具体流程如下: 首次使用AppleID  的注意事项:  要在设置中 进行 如下操作  设置--通用--描述文件   ---添加信任 但是有时候  还是 会不能调试,  显示信息  是这样的   : ...

  8. Unity问答——请教一下NGUI的图片转换问题

    这篇博客源自我在泰课在线的回答.链接:http://www.taikr.com/group/1/thread/92 问:请教一下NGUI的图片转换问题 1.NGUI能不能把导入的方形图片转成圆形的(因 ...

  9. 【转载】之 破解 （【原创】Xenocode Postbuild 2009 加壳破解 （不断更新中...））

    声明 本文转载,感谢原作者dotNetSafe分享 [原创]Xenocode Postbuild 2009 加壳破解 (不断更新中...) http://bbs.pediy.com/showthrea ...

  10. Java JPA 查询实体部分字段

    前言 相信大家在用Java JPA作为ORM的时候都会有这种困惑,就是某个表T我仅仅希望取到其中的A.B.C三个字段,可是jpa是通过Entity Class映射的方式组合查询结果的. 那么如何通过使 ...