Two ways to implement tab in pure CSS _php tutorial

tab is very common in current Web applications, and the biggest benefit is that you can make full use of the limited space to display more content. The Common tab is usually implemented via JavaScript, which has the advantage of being flexible and powerful. However, in some cases, it is possible to consider using pure CSS when only a simple content switch is needed. This article mainly introduces two kinds of pure CSS implementation scheme:

1. Anchor point +: target;

2. Pure anchor point;

Each of these two kinds has its own merits and limitations.

For a specific demo, please check here.

Scenario One: Anchor point +: Target

A new pseudo-class is introduced in CSS3: target, which triggers when the user interacts with the page, such as the following code, which triggers the P element when the user clicks on the link: Target Pseudo-class.

Link to Dest

This is a new paragraph.

The first option is to use the target pseudo-class to enable tab switching. The implementation principle is: When the page loads, the content of the tab is hidden through CSS, and the tab content is set to visible in the target pseudo class.

The HTML structure is as follows:

Tab A

Content A

Tab B

Content B

Tab C

Content C

Tab D

Content D

One advantage of using this structure is that you can still read the content clearly when the CSS is missing.
The key CSS code is as follows

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

dd:target{
Position:absolute;
/* Show tab Contents */
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 drawback to using CSS schemes is that it's not easy to tell which tab is currently selected, and one simple way is to set the same background color for the tab and tab content, so that when the tab content is displayed, you can clearly discern the current tab. In addition, because the selectors in CSS3 are used, they are currently only available in modern browsers such as Firefox, Safari, IE8, and so on.

Scenario Two: pure anchor point

The principle of scenario two is very simple, in most browsers, when clicking on the anchor link, the corresponding content of the anchor point will automatically jump to the visible range. Based on this principle, all tab contents 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. In this structure, when clicking on the anchor link, 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:

• Tab A


• Tab B


• Tab C


• Tab D

Content A


Content B


Content C


Content D

Because of the different principles of scheme one, the HTML structure here can only use the tab and content separation structure, one of the problems with 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 for tab content container */
#tab_content {
height:190px;
Overflow:hidden;
}
/* Set the height for each tab content and need to be consistent with the container */
#tab_content. content{
padding:5px;
-moz-border-radius:5px;
height:190px;
Overflow:hidden;
}

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

Summarize

1. The plain CSS implementation has a limited number of tabs, such as the need to set the same height for each tab content in scenario two.

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

3. Compatibility issues exist in all two scenarios, with the use of the CSS3 selector, which is limited to the implementation of CSS, which is said to be non-existent under opera.

4. In scenario one, Tab content is hidden when you click another anchor point that triggers: target (or similar interaction occurs).

http://www.bkjia.com/PHPjc/735089.html www.bkjia.com true http://www.bkjia.com/PHPjc/735089.html techarticle tab is very common in current Web applications, and the biggest benefit is that you can make full use of the limited space to display more content. Common tabs are usually implemented by JavaScript ...

