Two options for implementing tab in pure CSS

Source: Internet
Author: User
Tags range advantage

tab is very common in current Web applications, and the biggest benefit is that you can take advantage of limited space to show more content. The Common tab is usually done through JavaScript, and its benefits are flexible and powerful. In some cases, however, you might consider using a pure CSS if you only need a simple content switch. This article mainly introduces two kinds of pure CSS realization scheme:

1. Anchor point +: target;

2. Pure anchor point;

These two have their own advantages, but also have their own limitations.

For specific demo please check here

Option one: Anchor point +: Target

CSS3 introduces a new pseudo class: Target, which triggers when a user interacts with a page, such as the following code, which triggers the P element when the user clicks on the link: Target pseudo class.

<a href= "#dest" >link to Dest</a>
<p id= "Dest" >this is a new paragraph.</p>

Scheme one is to use: Target pseudo class to achieve tab switching. The principle of implementation is: when the page loads, the tab content is hidden through CSS, while the tab is set to visible in the target pseudo class.

The HTML structure is as follows:

<dl>
    <dt class= "Tab-a a" ><a href= "#a" >tab A</a></dt>
    <dd id= "a" class= "content-a"
    content a
    </dd
    <dt class= "tab-b" ><a href= "#b" >tab b</a></dt>
     <DD id= "B" class= "Content-b"
    content B
    </dd>
    <dt class= "tab-c" ><a href= "#c" >tab c</a></dt>
    < DD id= "C" class= "content-c"
    content C
    </dd>
  & nbsp <dt class= "tab-d" ><a href= "#d" >tab d</a></dt>
    <dd id= "D" class= " content-d
    Content d
    </dd>
</dl>
One advantage of using this structure is that you can still read content clearly when you lack CSS.
Key CSS code is as follows

dd{
padding:5px;
/* Hidden Tab content * *
Display:none;
-moz-border-radius:5px;
margin-top:20px
}

dd:target{
Position:absolute;
/* Show tab content/*
Display:block;
}
/* Set the same background color for tab and corresponding content.
. tab-a,.content-a{
Background: #CCFF00;
}
. tab-b,.content-b{
Background: #CCFFFF;
}
. tab-c,.content-c{
Background: #FFFF00;
}
. tab-d,.content-d{
Background: #FFCCFF;
}

One disadvantage of using CSS schemes is that it is not easy to distinguish which tab is currently selected, and a simple way is to set the same background color for the tab and tab content so that when the tab content is displayed, the current tab can be clearly identified. In addition, because of the use of the CSS3 in the selector, so currently only in Firefox, Safari, IE8 and other modern browsers to use.

Scenario two: pure anchor points

The principle of scheme two is very simple, in most browsers, when you click on the anchor Point link, the anchor content will automatically jump to the visual range. According to this principle, all the contents of the tab are placed in a fixed height container, and the overflow of the container is set to hidden, and the height of each tab content needs to be consistent with the container. Under the structure, when the anchor link is clicked, the corresponding content will automatically jump to the visual range to the content, that is, inside the container.

The specific HTML structure is as follows:

<ul id= "Tab_nv" >
<li class= "tab-a" ><a href= "#a2" >tab a</a></li>
<li class= "Tab-b" ><a href= "#b2" >tab b</a></li>
<li class= "tab-c" ><a href= "#c2" >tab c</a></li>
<li class= "tab-d" ><a href= "#d2" >tab d</a></li>
</ul>
<div id= "Tab_content" >
<div id= "A2" class= "Content content-a" >
Content A
</div>
<div id= "B2" class= "Content content-b" >
Content B
</div>
<div id= "C2" class= "Content content-c" >
Content C
</div>
<div id= "D2" class= "Content content-d" >
Content D
</div>
</div>

Because it is not the same as the principle of scheme one, the HTML structure here can only use the tab and content separation structure, one problem of using this structure is that when the CSS is missing, the content cannot be read clearly.

The key CSS code is as follows:

/* Set Height to tab content container * *
#tab_content {
height:190px;
Overflow:hidden;
}
/* To set the height of each tab content, need to be consistent with the container * *
#tab_content. content{
padding:5px;
-moz-border-radius:5px;
height:190px;
Overflow:hidden;
}

As with scenario one, this is done by setting the same background color for the tab and the corresponding content to resolve the check recognition problem.

Summarize

1. A pure CSS implementation of the tab restricted a lot, such as the Program II need to give each tab content to set the same height.

2. Unable to effectively identify the currently selected tab, this article is distinguished by setting the same background color, which in many cases does not necessarily apply.

3. There are compatibility issues in all two scenarios, one using the CSS3 selector and being limited to the implementation of CSS, while programme two is said to be under opera.

4. In scenario one, the Tab content is hidden when clicking on other triggers: Target anchor points (or similar interactions occur).




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.