CSS Tab Tips_PHP Tutorial

Programmers all know that tabs are generally implemented by Javascript. The advantage of javascript is that it is powerful and flexible. But there are also special cases. If we only need a simple content switch, we can use CSS to implement Tab. So how do you use CSS to implement Tab? Let’s join the editor to learn CSS to implement Tab techniques!
1. Anchor + :target;
2. Pure anchor point;
Each of these two has its own advantages and limitations.
Please check here for the specific Demo
Option 1: Anchor + :target
CSS3 introduces a new pseudo-class: target, which will be triggered when the user interacts with the page. For example, with the following code, when the user clicks on the link, the :target pseudo-class of the p element will be triggered.
Link to Dest

This is a new paragraph.

　
Solution one is to use the :target pseudo-class to implement Tab switching. The implementation principle is: hide the content corresponding to the Tab through CSS when the page is loaded, and set the Tab content to be 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 benefit of using this structure is that the content can still be read clearly without CSS.
The key CSS code is as follows

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

dd:target{
position: absolute;
/*Display the content of Tab*/
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 the CSS solution is that it is difficult to distinguish which Tab is currently selected. A simple way is to set the same background color for the corresponding Tab and the Tab content, so that when the Tab content is displayed, the current Tab can be more clearly identified. In addition, because it uses selectors in CSS3, it can currently only be used in modern browsers such as Firefox, Safari, and IE8.
Option 2: Pure anchor point
The principle of option 2 is very simple. In most browsers, when you click an anchor link, the content corresponding to the anchor will automatically jump within the visible range. According to this principle, put all the contents of the Tab into a fixed-height container, and set the overflow of the container to hidden. In addition, the height of each Tab content needs to be consistent with the container. Under this structure, when the anchor link is clicked, the corresponding content will automatically jump to the content in the visible range, that is, within 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 the principle is different from that of Solution 1, the HTML structure here can only use a structure where tabs and content are separated. One problem with using this structure is that the content cannot be read clearly when CSS is missing.
The key CSS code is as follows:
/*Set the height of the Tab Content container*/
#tab_content{
height: 190px;
Overflow: hidden;
}
/*Set the height of each Tab Content, which needs to be consistent with the container*/
#tab_content .content{​​​​
Padding: 5px;
-moz-border-radius: 5px;
height: 190px;
Overflow: hidden;
}
Like Solution 1, the selection recognition problem is solved here by setting the same background color for the Tab and the corresponding content.
Summary:
1. The Tab implemented by pure CSS has many limitations. For example, in the second option, each Tab Content needs to be set to the same height.
2. The currently selected Tab cannot be effectively identified. This article distinguishes it by setting the same background color, which may not be applicable in many cases.
3. Both solutions have compatibility issues. The first solution uses CSS3 selectors and is limited by the implementation of CSS; while the second solution is said to not work under Opera.
4. In Option 1, when you click on other anchors that trigger :target (or similar interactions occur), the Tab Content will be hidden.

http://www.bkjia.com/PHPjc/371856.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/371856.htmlTechArticle Programmers all know that Tabs are generally implemented by Javascript. The advantage of Javascript is that it is powerful and flexible. But there are special cases. If I only need a simple content switch...