Two options for implementing Tab using pure CSS_PHP tutorial

Tabs are very common in current web applications. The biggest advantage is that they can make full use of limited space to display more content. Common Tabs are generally implemented through Javascript, which has the advantage of being flexible and powerful. But in some cases, if you only need a simple content switch, you can consider using pure CSS to implement it. This article mainly introduces two pure CSS implementation solutions:

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.

The first option is to use the :target pseudo-class to implement Tab switching. The implementation principle is: when the page is loaded, the content corresponding to the Tab is hidden through CSS, and the Tab content is set 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

 

　　由于和方案一的原理不一样，此处的HTML结构也只能使用Tab和内容分离的结构，使用该结构的一个问题在于当CSS缺失的情况下无法清晰的阅读内容。

　　关键的CSS代码如下：

/*给Tab Content容器设置高度*/
#tab_content{
    height: 190px;
    overflow: hidden;
}
/*给每个Tab Content定高度，需要与容器保持一致*/
#tab_content .content{        
    padding: 5px;
    -moz-border-radius: 5px;
    height: 190px;
    overflow: hidden;
}

 

　　与方案一一样，这里也通过给Tab以及对应内容设置相同背景色来解决选中识别问题。

　　总结

　　1. 纯CSS实现的Tab受限很多，比如方案二中需要给每个Tab Content设置相同的高度。

　　2. 无法有效的标识当前选中的Tab，本文是通过设置相同背景色做区分，在很多情况下不一定适用。

　　3. 两个方案都存在兼容性问题，方案一使用了CSS3的选择符，受限于CSS的实现;而方案二据说在Opera下不灵。

　　4. 方案一中，当点击其他会触发:target的锚点(或发生类似交互)时，Tab Content会隐藏。