Two tabs implemented by pure CSS

Tab is very common in current Web applications. The biggest benefit is that it can fully utilize limited space to display more content. Common tabs are generally implemented through Javascript, and their benefits are flexibility and powerful functions. However, in some cases, if you only need a simple content switch, you can use pure CSS for implementation. <LINKhref = "http: // www. php1

Tab is very common in current Web applications. The biggest benefit is that it can fully utilize limited space to display more content. Common tabs are generally implemented through Javascript, and their benefits are flexibility and powerful functions. However, in some cases, if you only need a simple content switch, you can use pure CSS for implementation. This article mainly introduces two pure CSS implementation solutions:

1. Anchor +: target;

2. pure anchor;

These two methods have their own advantages and limitations.

For more information about the Demo, see here.

Solution 1: Anchor +: target

CSS3 introduces a new pseudo class: target, which is triggered when a user interacts with a page, such as the following code. when a user clicks a link, the target pseudo class of the p element is triggered.

Link to Dest This is a new paragraph.

Solution 1: Use the target pseudo class to implement Tab switching. Implementation principle: hide the corresponding content of the Tab through CSS during page loading, and set the Tab content to visible in the: target pseudo class.

The HTML structure is as follows:

Tab Content Tab B Content B Tab C Content C Tab D Content D One advantage of using this structure is that the content can still be clearly read when CSS is missing. The key CSS code is as follows: Dd { Padding: 5px; /* Hide the Tab content */ Display: none; -Moz-border-radius: 5px; Margin-top: 20px } Dd: target { Position: absolute; /* Display the Tab content */ Display: block; } /* Set the same background color for the Tab and corresponding content */ . Tab-a,. content-{ Background: # CCFF00; } . Tab-B,. content-B { Background: # CCFFFF; } . Tab-c,. content-c { Background: # FFFF00; } . Tab-d,. content-d { Background: # FFCCFF; }

One drawback of the CSS solution is that it is difficult to distinguish which Tab is currently selected. a simple method is to set the same background color for the corresponding Tab and Tab content, so that when the Tab content is displayed, the current Tab can be more clearly identified. In addition, because the selector in CSS3 is used, it can only be used in modern browsers such as Firefox, Safari, and IE8.

Solution 2: pure anchor

Solution 2 is simple. in most browsers, when you click the anchor link, the content of the anchor automatically falls within the visible range. According to this principle, all the content of the Tab is put in a fixed height container, and the container overflow is set to Den. In addition, the height of each Tab must be consistent with that of the container. In this structure, when you click the anchor link, the corresponding content will automatically jump to the visible range to show the content, that is, in the container.

The specific HTML structure is as follows:

Tab Tab B Tab C Tab D Content Content B Content C Content D

Because it is different from solution 1, the HTML structure here can only use the structure of Tab and content separation, the problem with using this structure is that the content cannot be clearly read when CSS is missing.

The key CSS code is as follows:

/* Set the height for the Tab Content container */ # Tab_content { Height: Pixel px; Overflow: hidden; } /* Set the height for each Tab Content, which must be consistent with the container */ # Tab_content. content { Padding: 5px; -Moz-border-radius: 5px; Height: Pixel px; Overflow: hidden; }

Like solution 1, the same background color is set for Tab and corresponding content to solve the selection and recognition problem.

Summary

1. there are many tabs implemented by pure CSS. for example, in solution 2, you must set the same height for each Tab Content.

2. the selected Tab cannot be effectively identified. This document sets the same background color to differentiate the selected Tab, which is not applicable in many cases.

3. both solutions have compatibility issues. Solution 1 uses the CSS3 selector, which is restricted by the implementation of CSS. Solution 2 is said to be ineffective under Opera.

4. in solution 1, when you click another option, the Tab Content is hidden when the target's anchor (or similar interaction occurs) is clicked.