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. jQuery慢慢啃之特效（八）

    1.show([speed,[easing],[fn]])\\显示隐藏的匹配元素 //speed:三种预定速度之一的字符串("slow","normal", o ...

  2. PHP框架_ThinkPHP数据库

    目录 1.ThinkPHP数据库配置 2.ThinkPHP数据库实例化模型 3.ThinkPHP数据库CURD操作 4.ThinkPHP数据库连贯操作 1.ThinkPHP数据库配置 App/Conf ...

  3. webapp开发——‘手机屏幕分辨率’与‘浏览器分辨率’不要混淆

    关于webApp响应式设计遇到的问题,分享给大家,最近在做一个手机webApp,因为我手机是”米3“,屏幕截图大小是1080宽,所以css样式用@media screen and(min-width: ...

  4. CVPR2011录取结果

    CVPR2011论文录取已经结束了,虽然论文都还没有在线公布出来,不过相信http://www.cvpapers.com/会很快有的.这里大体看一下结果统计与分析: At the end of the ...

  5. 今天写了个从一张表数据插入到另一张表的oracle 语句

    create or replace procedure data_move(param in number) is cursor enterprise is select SENTERPRISEID, ...

  6. Knight Tournament

    Codeforces Round #207 (Div. 1) A:http://codeforces.com/problemset/problem/356/A 题意:给你n匹马,然后有m场比赛.每场比 ...

  7. Spring中用@Component、@Repository、@Service和 @Controller等标注的默认Bean名称会是小写开头的非限定类名

    今天用调度平台去调用bean中的方法时,提示找不到bean.经查,发现是由于如果在标注上没有提供name属性值,则默认的bean名称是小写开头的,而不是大写开头的. 下面是其他文档参阅: 使用过滤器自 ...

  8. 关于javascript document.createDocumentFragment() 替代insertCell、insertRow这种每次都使用大量的资源导致浏览器崩溃

    documentFragment 是一個無父對象的document對象他支持以下DOM2方法: appendChild, cloneNode, hasAttributes, hasChildNodes ...

  9. 中国linux论坛

    linux在国内经过十多年的发展,已慢慢走向成熟.昔日如雨后春笋般成长的linux网站,现在已出现了明显的两极分化.一部分已成长壮大,公司化运作,一部分面临域名出售或关闭的境地.  以笔者经验,以下十 ...

  10. kernel解读之 pick_next_rt_entity

    1328 static struct sched_rt_entity *pick_next_rt_entity(struct rq *rq, 1329 struct rt_rq *rt_rq) 133 ...