Css3:target pseudo-Class for tab switching effect

Using: Target pseudo-class to achieve tab switching effect is really very simple! How simple is that? It only requires the following code.

STYLE.CSS:

{    position: absolute;     background: #fff;            }  {    z-index: 1;}

HTML code:

<Divclass= "Song-nav">    <ulclass= "Song-menu">        <Li><ahref= "#song-info">Basic information</a></Li>        <Li><ahref= "#song-LYRICCN">Chinese lyrics</a></Li>        <Li><ahref= "#song-lyricen">English lyrics</a></Li>    </ul></Div><DivID= "SONG-LYRICCN"class= "Song-info">... 3 ...</Div><DivID= "Song-lyricen"class= "Song-info">... 2 ...</Div><DivID= "Song-info"class= "Song-info">... 1 ...</Div>    

Use only Position:absolute; (Applies to toggle content) and : Target pseudo-class is implemented by pointing to the object (target object) display level boost (z-index:1).

Of course, you may think that the code is feasible, but the display effect is too ugly, no matter, give the style is OK.

1. Add a nice border effect to your content

/**/border:1px solid #91a7b4; border-radius:3px;box-shadow:0 2px 3px Rgba (0,0,0,0.1);

2. Navigation menu options Single line display

{    display: inline-block;}

3. Menu options also have a nice border, and the default underline of the link is too ugly, I want to remove!

{    text-decoration: none;     Border: 1px solid #91a7b4;     Border-radius: 0 0 5px 5px;     box-shadow: 0 2px 3px rgba (0,0,0,0.1);}

Note: Open the page, first see is the last Content box content (that is <div id= "Song-info" >), you can see in the navigation bar is the first option. Why did you do it? Because the browser renders the page, because the content is absolutely layout (position:absolute), so the next div to cover the front, so this point to note that you want the first display of the content div on the last side .

Reference Address: Practical CSS3 attribute: Target pseudo-class for tab switching effect

Finish

Css3:target pseudo-Class for tab switching effect