Examples of implementations of a pure CSS tab

In EB Development, the tab effect is very common. Almost all large websites are in use, such as Sina, NetEase, Tencent. Look at the source code and you'll find that it's all based on JavaScript. Can I implement tabs based on CSS only? Can tick

A tab based on Anchor point location implementation

A lot of people only know the a tag to do hyperlinks, but do not know its other function, page content anchor location:

<a href= "#bottom" > click to jump to the bottom of the page </a>
Click on the link above, will automatically locate the page ID for bottom elements, in fact, change is to change the side of the scrolltop value of scrolling, you can click the following demo download, view the principle demo demo.

The following is the HTML code implemented based on the Stroke Positioning tab

<div class= "Css-tab" >
<ul class= "Tab-ul" >
<li><a href= "#tab-1" > tab 1</a></li>
<li><a href= "#tab-2" > tab 2</a></li>
</ul>
<div class= "Tab-con" >
<div id= "Tab-1" >
Here's what tab 1 is.
</div>
<div id= "Tab-2" >
Here's what tab 2 is.
</div>
</div>
</div>
The following basic CSS styles

*{
margin:0;
padding:0;
}
. clearfix {
*zoom:1;
}
. Clearfix:before,. Clearfix:after {
display:table;
line-height:0;
Content: ';
}
. clearfix:after {
Clear:both;
}
. css-tab {
width:200px;
Height:auto;
MARGIN:8PX Auto;
}
. tab-ul {
padding-left:1px;
}
. Tab-ul li{
padding-left:8px;
padding-right:8px;
line-height:28px;
border:1px solid #ccc;
Margin-left: -1px;
Border-bottom:none;
Float:left;
List-style:none;
}
. Tab-ul Li a {
Text-decoration:none;
}
. Tab-con {
Overflow:hidden;
}
Tab-con, #tab-1, #tab-2 {
height:200px;
}
#tab-1 {
Background: #B3C2DE;
}
#tab-2 {
Background: #d8ffef;
}
For the above demo code, you can click Demo Deom online to view and study, of course, you can also easily download the source code:

See Demo Download Demo
tab effect based on CSS selector implementation

In CSS 3, the CSS selector is expanded. In the process of making a tab, we pass to the property selector and the sibling selector. The HTML code structure is implemented as follows:

<div class= "Tabs" >
<div class= "tab" >
<label for= "Check1" > 1th tab </label>
<input id= "Check1" type= "Radio" name= "tabs" checked= "Checked"/>
<div class= "Content" >
The contents of the 1th tab are placed here
</div>
</div>
<div class= "tab" >
<label for= "Check2" > 2nd tab </label>
<input id= "Check2" type= "Radio" name= "tabs"/>
<div class= "Content" >
The contents of the 2nd tab are placed here
</div>
</div>
<div class= "tab" >
<label for= "Check3" > 3rd tab </label>
<input id= "Check3" type= "Radio" name= "tabs"/>
<div class= "Content" >
The contents of the 3rd tab are placed here
</div>
</div>
</div>
This is the corresponding CSS:

*{
margin:0;
padding:0;
}
. clearfix {
*zoom:1;
}
. Clearfix:before,. Clearfix:after {
display:table;
line-height:0;
Content: ';
}
. clearfix:after {
Clear:both;
}
. tabs {
width:300px;
height:300px;
Background:pink;
position:relative;
}
. tab {
Float:left;
width:80px;
height:70px;
overflow:visible;
}
. tab Label {
Display:block;
width:80px;
height:40px;
line-height:40px;
Cursor:pointer;
font-size:13px;
}
. tab Input {
Display:none;
}
. Content {
Position:absolute;
top:40px;
left:0;
width:300px;
height:260px;
Z-index:1;
}
. tab input:checked ~. Content {
Z-index:2;
Background:pink;
}
Note: Selector based tabs because the lower version of IE browser does not support the advanced Selector, the tab effect does not support switching. In addition, the selector must be declared as HTML 5 in IE 8 for normal parsing. In order for the lower version of IE to support some advanced selectors, you can look at the SELECTIVIZR.