Speaking Tab to switch, you may first think of is to use jQuery, just a few lines of code you can easily get a Tab to switch.
Today want to share, using 0 lines JS code to implement Tab to switch!
Specific results are as follows:
Method One: analog radio button principle
This method generally works as follows:
When the user clicks the label element, the label bound to a single input box will be selected at the same time by using CSS selectors make label and .content items after the selected input elements coupled with the appropriate style.
Specifically, how to achieve it? Please be patient read on ...
1. HTML structure
<!--HTML-->
<ul> <li> <input id="tab1" type="radio" name="tab" checked> <label for="tab1">选项一</label> <div class="content">选项一内容</div> </li> <li> <input id="tab2" type="radio" name="tab"> <label for="tab2">选项二</label> <div class="content">选项二内容</div> </li> <li> <input id="tab3" type="radio" name="tab"> <label for="tab3">选项三</label> <div class="content">选项三内容</div> </li> </ul> Checkbox surely we will use it, type for the radio, name attribute to the same value.
Also note the following two points:
① label need to bind input, the method is the same id for property values input of the label , so when you click the label element input will be selected radio button
② input, label and div three are sequential , can not freely exchange order (you know the reason behind)
2. CSS Styles
No JS, CSS then naturally you have to play a vital role.
/*CSS*/
*{ margin: 0; padding: 0;} ul{ position: relative; width: 300px; margin: 100px auto;} ul li{ list-style: none;} ul li input{ display: none;} ul li label{ float: left; width: 100px; text-align: center; line-height: 30px; border: 1px solid #000; border-right: 0; box-sizing: border-box; cursor: pointer; transition: all .3s;} ul li input:checked+label{ color: #fff; background-color: #000;} ul li:last-child label{ border-right: 1px solid #000;} ul li .content{ opacity: 0; visibility:hidden; position: absolute; left: 0; top: 31px; width: 100%; height: 300px; border: 1px solid #000; box-sizing: border-box; font-size: 24px; text-align: center; line-height: 300px; color: #fff; transition: all .3s;} ul li:nth-child(1) .content{ background-color: #0f0;} ul li:nth-child(2) .content{ background-color: #00f;} ul li:nth-child(3) .content{ background-color: #f0f;} ul li input:checked~.content{ opacity: 1; visibility:visible;} Here, too, there are some key points to note:
① input to hide, because we do not need to show it, but it is the core strength of Tab to switch
② "the INPUT: the checked + label" represents a label elements after the selected radio button needs to mark
③ .content elements needed first of all hidden
③ "the INPUT: the checked ~ .content" represents .content element of a selected radio button needs to be displayed
Note: + means adjacent sibling selector, i.e. immediately subsequent selected element; ~ represents sibling selectors, i.e. to select all of the sibling elements following the element
Method II :: target pseudo-class
About: target pseudo-class, I have mentioned in previous articles, please poke → pure CSS production of single-page Web applications
This method generally works as follows:
When a user clicks on an element, the URL of the page will add the appropriate link to the current anchor clicked, then the corresponding .content element of this application will anchor connection id: target pseudo-class style, but also to have been applied on: target a pseudo-element after the elements of the class itself .content style applications.
1. HTML structure
<!--HTML-->
<ul> <li> <div class="content" id="content1">选项一内容</div> <a href="#content1">选项一</a> </li> <li> <div class="content" id="content2">选项二内容</div> <a href="#content2">选项二</a> </li> <li> <div class="content" id="content3">选项三内容</div> <a href="#content3">选项三</a> </li> </ul> HTML structure in this way is relatively simple, does not require the use of hidden single box as a medium, but the use of anchors and links: target as a bridge between connections "Options" and "Options content."
Also note the following two points:
① id attribute value of each of a href tag elements shall therewith coincide .content sibling nodes
② .content sequence elements and a label can not be changed
2. CSS Styles
/*CSS*/
*{ margin: 0; padding: 0;} a{ text-decoration: none; color: #000;} ul{ position: relative; width: 300px; margin: 100px auto;} ul li{ list-style: none;} ul li a{ float: left; width: 100px; text-align: center; line-height: 30px; border: 1px solid #000; border-right: 0; box-sizing: border-box; cursor: pointer; transition: all .3s;} ul li:last-child a{ border-right: 1px solid #000;} ul li .content{ opacity: 0; position: absolute; left: 0; top: 31px; width: 100%; height: 300px; border: 1px solid #000; box-sizing: border-box; font-size: 24px; text-align: center; line-height: 300px; color: #fff; transition: all .3s;} ul li:nth-child(1) .content{ background-color: #0f0;} ul li:nth-child(2) .content{ background-color: #00f;} ul li:nth-child(3) .content{ background-color: #f0f;} ul li .content:target{ opacity: 1;} ul li .content:target+a{ color: #fff; background-color: #000;} Here, too, there are some key points to note:
① ".content: target" will anchor a link to the current .content apply a style element
② ".content: + a target" after the current .content element anchor links to the immediately apply a style element
This article focuses summary
No need JS, using a single box or anchor links, together with some CSS styles to create a simple Tab to switch