Using pure CSS3 to implement tab tab switching example

Let's take a look .

CSS3 pseudo-Class target
Using the target feature, you can switch the tab effect of the pure CSS.

The sample code is as follows

The code is as follows:

   <style type= "Text/css" >. tabmenu{position:absolute;            top:-28px;            left:144px;        margin:0px;        }. tabmenu li{display:inline-block;            }. tabmenu Li a{display:block;            padding:5px 10px; margin:0            10px 0 0;            border:1px solid #91a7b4;            border-radius:5px 5px 0 0;            Background-color: #e3f1f8;            Color: #333;            Text-decoration:none;        font-size:16px;            }. tablist{position:relative;            top:200px;            margin:0 Auto;            width:600px;        min-height:200px;            }. tab_content{Position:absolute;            width:600px;            height:170px;            padding:15px;            border:1px solid #91a7b4;            border-radius:10px; box-shadow:0            2px 3px Rgba (0,0,0,0,1);            font-size:16px;            line-height:16px; ColOr: #666;        Background-color: #fff;        } #tab1: Target, #tab2: Target, #tab3: target{z-index:1; } </style> <p class= "Tablist" > <ul class= "tabmenu" > <li><a href= "#tab1" >tab1</a></li> <li><a href= "#tab2" >tab2</a></li> &LT;LI&GT;&L T;a href= "#tab3" >tab3</a></li> </ul> <p id= "tab1" class= "Tab_content" >tab1</p&        Gt <p id= "tab2" class= "tab_content" >tab2</p> <p id= "tab3" class= "Tab_content" >tab3</p> < /p>

The most critical code

The code is as follows:

#tab1: Target, #tab2: Target, #tab3: target{    z-index:1;}

First, according to the characteristics of the target anchor link to the corresponding p, and then according to the Z-index properties, change the level of P relationship, so that the tab switch effect!

Target compatibility
Finally, mention the compatibility issue: Because this is a new feature of CSS3, it is not compatible with older browsers, such as IE678.

Summarize
The above is the entire content of this article, I hope that everyone's study or work to bring some help, if there are questions you can message exchange.