Example code for tab switch effects with CSS _css Tutorial _css_ Web page Authoring

Recently cut a page is involved in a tab switch part, because do not want to use JS thinking can be used with a pure CSS selector to achieve the switch effect. The following three types of writing are generally available.

1. Using: Hover Selector

Disadvantage: Only the mouse on the element above the effect, can not achieve the selection and the default display of one effect

2. Using the A-tag anchor point +: Target Selector

Disadvantage: Because the anchor point will scroll the selected elements to the top of the page, each switch position to move, experience the worst.

3, using the binding relationship between label and radio and radio when selected: checked to achieve the effect

Cons: HTML structural elements are more complex

It was found that the third method achieved the best results. So here's a third way to implement it.

This method of writing is not fixed, I check the information when all kinds of writing have once let me confused. Finally see the overall idea is the same, is nothing more than the following several steps.

1. Bind label and radio: This Needless to say ID and for property binding

2. Hide radio Button: This method has a lot of full play your imagination can be, I have seen the method has set display:none; Hide, set absolute positioning, set left to a large negative value, move to the outside of the page to achieve a hidden effect, set * * Absolute positioning: The elements out of the document flow, and then opacity:0; * * Set to transparent to achieve hidden effects.

3. Hide Unwanted tab pages: As with the above, you can also set hierarchical relationships with Z-index to mask each other.

4. Set Default: Add Checked= "Checked" Property on default button

5. Set Selection: Use the + selector and the ~ selector to set the style of the tab below when the corresponding element is selected to achieve the selected effect

/* When Radio is selected, the attribute of its Test-label sibling element is set */input[type= "Radio"]:checked+.test-label {/    * in order to decorate the existing border Background property *    / Border-color: #cbcccc;    Border-bottom-color: #fff;    Background: #fff;    /* In order to modify the existing hierarchy to obscure the top border of p below the bottom frame */    z-index:10;} /* Set the display level of the Tab-box element with its sibling when radio is selected */input[type= "Radio"]:checked~.tab-box {/    * Raise the level when selected, masking other tab pages to the effect of the selected toggle */    Z-index:5;}

This can achieve a tab page switching effect, not a bit of JS, of course, there are certainly compatibility issues. The actual operation of the tab page or use JS is better. Below is the code of the small demo, the style is more mainly to achieve a variety of selected effects, really used to achieve the selection of the core code of the switch to a few lines

Demo Address

Code:

<! DOCTYPE html>