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. 深入解析.NET框架

    一.AOP框架        Encase 是C#编写开发的为.NET平台提供的AOP框架.Encase 独特的提供了把方面(aspects)部署到运行时代码,而其它AOP框架依赖配置文件的方式.这种 ...

  2. 七天学会SALTSTACK自动化运维 （2）

    七天学会SALTSTACK自动化运维 (2) 导读 Grains Pillar 总结 参考链接 导读 上一篇主要介绍了安装和基本的使用方法,但是我认为如果理解了相关概念的话,使用会更加顺手,因为毕竟每 ...

  3. 七天学会 SALT STACK 自动化运维 (1)

    七天学会 SALT STACK 自动化运维 (1) 简单理解 SALTSTACK 安装与配置 基本的使用方法 结束语 引用资源 简单理解 SALT STACK 笔者是初次接触 自动化运维 这一技术领域 ...

  4. 怎么用notepad配置来运行C语音环境

    想要运行C语言,我们可以用notepad软件来进行编辑,那么怎么用notepad 配置运行c语言开发环境呢? Notepad++是一款很好的编辑器,可以用来开发很多的工具,具体大家请看下文给大家详细讲 ...

  5. Vim及VimScript资料总结《转载》

    版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[+]   Vim教程 入门 Vim 实用技术 Learning the vi and Vim Editors A Byte of ...

  6. github克隆项目中的子模块submodule时遇到的问题

    GitHub真是个开源大宝库,不只能学习代码,还能学习git的使用! 最近在研究Off-the-Record-iOS项目(https://github.com/chrisballinger/Off-t ...

  7. 删除svn文件

    删除svn文件 sudo find . -name ".DS_Store" -exec rm -r {} \; sudo find . -name ".git" ...

  8. iOS中浅淡UIApplication单例-b

    在iOS的操作系统中 每一个程序都对应一个application单例,每一个application都对应一个Appdelegate代理,在代理中控制程序的各个状态.我们在程序中获取Applicatio ...

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

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

  10. 【技术贴】第二篇 ：解决使用maven jetty启动后无法加载修改过后的静态资源

    之前写过第一篇:[技术贴]解决使用maven jetty启动后无法加载修改过后的静态资源 一直用着挺舒服的,直到今天,出现了又不能修改静态js,jsp等资源的现象.很是苦闷. 经过调错处理之后,发现是 ...