Introduction of using CSS3 to make a nice tab tab

This CSS3 tab style has been written out for a long time, has not been available to share it out, maybe there are many other such code on the Internet, but there is no one is used to me: checked to do, no matter what, more master a way is also helpful to you.

The effect is like a tab that has been written before in the blog: it has the latest articles, hot articles and random articles.

The first:: Checked

First write HTML and CSS as usual, but use the radio of input as a click to select the content. Input:checked to hide and display the content that needs to be matched.

The HTML code is as follows:

The code is as follows

Copy Code

<div class= "Widget Widget-tab" > <input type= "Radio" name= "Widget-tab" id= "new" checked= "checked"/> <input type= "Radio" name= "Widget-tab" id= "hot"/> <input type= "Radio" name= "Widget-tab" id= "random"/> <div class= "Widget-title inline-block" > <ul> <li class= "New" > <label for= "new" > Latest blog post </label> </li> <li class= "Hot" > <label for= "Hot" > Thermal Commentary blog </label> </li> <li class= "Random" > <label for= "random" > Random posts </label> </li> </ul> </div> <div class= "Widget-box" > <ul class= "New-list" > <li>......</li> </ul> <ul class= "Hot-list" > <li>......</li> </ul> <ul class= "Random-list" > <li>......</li> </ul> </div> </div>

Note: There are several tab pages, you need to add a few input, and each input must be set to the name of the same, and these input must be placed at the front, by choosing to later use the CSS3 sibling element link to change the style. And tab inside the "latest blog, hot Comment blog, random blog" are to be surrounded by label, with a corresponding for.

The CSS code is as follows:

The code is as follows	Copy Code
. Widget-tab Input{display:none} . Widget-tab. Widget-box Ul{display:none} #new: Checked ~ widget-title. New, #hot: Checked ~. Widget-title hot, #random: Checked ~ widget-title. Random{background: #F7F7F7} #new: Checked ~ widget-box new-list, #hot: Checked ~ widget-box. Hot-list, #random: Checked ~ widget-box. random-list{ Display:block}

Second:: Target

Previously said CSS3 animation production methods are: Target and: Checked the same, this tab can also be used: target to achieve, but to achieve compared with: checked, experience a lot worse, because it clicked the anchor point, so that the link also occurred jump, Give a person a very sudden feeling. The idea is to click: Target season corresponding to the z-index larger, repeat overlay on the previous layer.

HTML code

The code is as follows

Copy Code

<div class= "Tab-wrap" > <div class= "Tab-title" id= "Tabtitle" > <ul class= "Clearfix" > <li><a href= "#tab1" > Latest Articles </a></li> <li><a href= "#tab2" > Popular articles </a></li> <li><a href= "#tab3" > Random articles </a></li> </ul> </div> <div class= "Tab-content" > <ul id= "Tab1" > <li>......</li> </ul> <ul id= "TAB2" > <li>......</li> </ul> <ul id= "Tab3" > <li>......</li> </ul> </div> </div>

CSS Code

The code is as follows	Copy Code
. tab-content{position:relative min-height:200px; border:1px solid #ddd; margin-top:-1px; . tab-content Ul{position:absolute; min-height:100px left:0; top:1px; padding:10px; background: #fff;} #tab1: Target, #tab2: Target, #tab3: target{z-index:1;

Note: If you want to achieve the click of the title when the active state changes, you want to put the title behind the content, showing very inconsistent with the HTML ideas. So the personal recommendation uses: checked to use, not only is simple, conforms to the semantics, and does not need to consider the problem which the CSS localization causes. The CSS ticks found in this Article CSS3 tab is used: Target to do the method, but I do not recommend this method.

Browser compatibility

IE8 and the following browsers are not supported

Chrome, Firefox, 360 can be used