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. mysql基础操作整理(一)

    显示当前数据库 mysql> select database(); +------------+ | database() | +------------+ | test | +-------- ...

  2. Entity Framework 级联删除

    为一对主从表增加级联删除功能 protected override void OnModelCreating(DbModelBuilder modelBuilder) { modelBuilder.E ...

  3. import uno 错误

    安装aeroolib 模块后,提示没有 uno 相关段一些模块, 原因是这些模块是 openoffice 中段,需要先安装 openoffice. 1:清除所有 libreoffice 软件,  su ...

  4. Mvc controller单元测试 Mock Url对象

    被测试Action 包含有Url对象的代码: data = new data { title = ds.Name, icon = "folder", attr = new { id ...

  5. phalapi

    public为程序入口 Demo和MyApp为具体的实现 public为多入口 demo和myapp都是入口,但是进入后即又为单入口 list为接口文档,是自动解析程序里的注释自动生成的文档 框架执行 ...

  6. smtp协议

    一.smtp命令 1.HELO 向服务器标识用户身份 2.MAIL 初始化邮件传输mail from: <xxx> 3.RCPT 标识单个的邮件接收人:常在MAIL命令后面可有多个rcpt ...

  7. VmWare问题解决（网络变更后虚拟主机无法上网）

    安装 Vmware,并新建一个虚拟机后,当时做好配置(NAT模式)后,虚拟机能够正常上网. 然后将电脑带到另一个地理位置办公时,却无法上网. 本篇探讨问题的缘由和几种解决方式. 一.缘由解析 仅探讨上 ...

  8. [BZOJ 1026] [SCOI 2009] Windy数 【数位DP】

    题目链接:BZOJ - 1026 题目分析 这道题是一道数位DP的基础题,对于完全不会数位DP的我来说也是难题.. 对于询问 [a,b] 的区间的答案,我们对询问进行差分,求 [0,b] - [0,a ...

  9. HttpClient4.3.6 实现https访问

    package httptest; import java.io.IOException; import java.nio.charset.Charset; import java.security. ...

  10. python PIL except： IOError: decoder jpeg not available

    今天在Python运行环境的服务器弄一个有关图像处理的程序时报这样的错: 1 NameError: global name 'Image' is not defined import Image 了下 ...