Examples of implementations of a pure CSS tab

Source: Internet
Author: User


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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.