Css3:target pseudo-Class for tab switching effect

CSS Styles

. Tablist{position:relative;margin:50px Auto;Min-height:200px;}/*This example style begin*/. Tab_content{position:Absolute;/*Set Content box as absolute*/    /*content Style begin*/width:600px;Height:170px;padding:15px;Border:1px solid #91a7b4;Border-radius:3px;Box-shadow:0 2px 3px rgba (0,0,0,0.1);font-size:1.2em;Line-height:1.5em;Color:#666;background:#fff;}#tab1: Target, #tab2: Target, #tab3: Target{Z-index:1;}/*Tabmenu Style*/. Tabmenu{position:Absolute;Top:100%;margin:0;}. Tabmenu Li{Display:Inline-block;}. Tabmenu Li a{Display:Block;padding:5px 10px;margin:0 10px 0 0;Border:1px solid #91a7b4;Border-radius:0 0 5px 5px;background:#e3f1f8;Color:#333;text-decoration:None;}

HTML code

<Divclass= "Tablist">    <ulclass= "Tabmenu">        <Li><ahref= "#tab1">Label One</a></Li>        <Li><ahref= "#tab2">Label two</a></Li>        <Li><ahref= "#tab3">Label Three</a></Li>    </ul>    <DivID= "Tab1"class= "Tab_content">Welcome to add design to the Q group: 50063010<BR/>design to the original and share some high-quality design articles mainly, I hope to like! <!--End TAB1 Content -</Div>    <DivID= "TaB2"class= "Tab_content"><P>This tab toggle effect pure CSS3 production, without any JavaScript</P>Latest Q Group: 50063010<BR/>love design, love to share--design of the person (http://www.shejidaren.com)<!--End TAB2 Content -</Div>    <DivID= "Tab3"class= "Tab_content"><Pstyle= "FONT-SIZE:24PX;">High quality design article sharing platform</P><P>Welcome to add design to the Q group: 50063010<BR/>Design to the original and share some high-quality design articles mainly, I hope to like</P>    <!--End TAB3 Content -</Div></Div>

Css3:target pseudo-Class for tab switching effect