[CSS3] CSS :target Selector

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>

 

 

 

posted @ 2016-05-07 16:32  Zhentiw  阅读(218)  评论(0)  编辑  收藏  举报