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. phpcms v9后台美化需要修改的部分整理

    PHPcms后台登陆后的页面修改 Phpcms->modules->admin->templates->main.tpl.php 1,安全提示部分 <h6>< ...

  2. .NET Framework（一）

    .NET Framework:即Microsoft .NET Framework,它是用于Windows的新托管代码编程模型.它强大功能与新技术结合起来,用于构建具有视觉上引人注目的用户体验的应用程序 ...

  3. Unity3D动态加载外部资源

    最近一直在和这些内容纠缠,把心得和大家共享一下: Unity里有两种动态加载机制:一是Resources.Load,一是通过AssetBundle,其实两者本质上我理解没有什么区别.Resources ...

  4. codebook法分割前景目标

    利用codebook法训练得到背景模型后,对背景差分得到的掩模图像去噪声并找到较大连通域.相对于平均背景法,它的分割效果更好些.当然,分割效果和背景模型训练的帧数有很大关系,适当调整一些参数会得到更好 ...

  5. react-redux原理

    react-redux原理分析 写在前面 之前写了一篇分析Redux中Store实现的文章(详见:Redux原理(一):Store实现分析),突然意识到,其实React与Redux并没有什么直接的联系 ...

  6. C++关于构造函数的深拷贝与浅拷贝

    首先拷贝构造函数的声明方法: 类名::类名(const 类名&) 1.浅拷贝的实现程序: #include "stdafx.h" #include <iostream ...

  7. Selenium 自动化验收测试

    Web 应用程序的验收测试常常涉及一些手工任务,例如打开一个浏览器,并执行一个测试用例中所描述的操作.但是手工执行的任务容易出现操作人员人为的错误,也比较费时间.因此,尽可能将这些任务自动化,以消除人 ...

  8. Vessels

    Codeforces Round #218 (Div. 2) D:http://codeforces.com/problemset/problem/371/D 题意:就是有一些盘子,盘子里可以装水,这 ...

  9. WINDOWS下的SALT-MINION安装流水图

    简单的下一步下一步, 没多少说的,可以在安装的时候设置MASTER和MINION的东东.. 不多说,上图:

  10. 对依赖倒置原则(DIP)及Ioc、DI、Ioc容器的一些理解（转）

    所谓依赖倒置原则(Dependence Inversion Principle)就是要依赖于抽象,不要依赖于具体.简单的说就是要求对抽象进行编程,不要对实现进行编程,这样就降低了客户与实现模块间的耦合 ...