Programmers know that the General tab is implemented by JavaScript, and the advantage of JavaScript is that it is powerful and flexible. But there are special circumstances, if only a simple content switch we can use CSS to implement tab. So how does CSS implement tab need to operate? Below and small weave together to learn CSS to implement TAB skills!
1. Anchor point +: target;
2. Pure anchor point;
These two have their own advantages, but also have their own limitations.
Concrete Demo See here
Scenario One: Anchor +: 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: The target pseudo class.
<a href= "#dest" >link to Dest</a>
<p id= "Dest" >this is a new Paragraph.</p> The
scenario one is to use the target pseudo class for 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 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>
<dt class= "tab-d ><a href=" # D ">tab d</a></dt>
<dd id=" D "class=" content-d "
Content D
</dd>
</dl>
UseOne of the benefits of 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 contents */
display: None
-moz-border-radius:5px;
margin-top:20px
}
dd:target{
position:absolute;
/* Show tab content */
display:block;
}
/* Sets the same background color */
for the 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 of
's use of 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.
Scheme II: pure anchor Point
The principle of
scheme Two is very simple, in most browsers, when you click on the anchor link, the anchor points 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.
specific HTML structure is as follows:
<ul id= "Tab_nv"
<li class= "tab-a" ><a href= "#a2" >tab 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 different from 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.
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 identification problem.
Summary:
1. Pure CSS implements a lot of tab constraints, 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 distinguished by setting the same background color, which is not necessarily true in many cases.
3. Two scenarios have compatibility problems, the scheme one uses the CSS3 selector, subject to the implementation of CSS, and Scheme II 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).
