Some interesting CSS questions (8) -- The Tab switching solution for the pure CSS navigation bar and the css navigation bar

Some interesting CSS questions (8) -- The Tab switching solution for the pure CSS navigation bar and the css navigation bar

Start this series and talk about some interestingCSSQuestions and question types are not empty. What to think of is not only to broaden the problem-solving ideas, but also to involve CSS details that are easy to ignore.

Compatibility is not taken into consideration in solving the problem. The question is just a blank question. What do you think of? If you have the uncommon CSS attribute in solving the problem, please study it.

Update, update, and update important things three times.

Some interesting CSS questions (1) -- Implementation of the vertical bar on the left

Some interesting CSS questions (2) -- about the box model from the implementation of the striped border

Some interesting CSS questions (III)-How much do I know about the stacked sequence and stack context?

Some interesting CSS questions (4) -- Starting from reflection, talking about how CSS inherits inherit

Some interesting CSS questions (5) -- center a single row, center two rows to the left, and omit more than two rows

Some interesting CSS questions (6)-fully compatible multi-column uniform layout

Some interesting CSS questions (7) -- The Disappearing line

All questions are summarized in my Github.

 

8. CSS-only navigation bar Tab switching Solution

NoJavascript, Use pureCSSSolution to achieve a similar navigation bar switch:

The strength of CSS is sometimes beyond our imagination. In general, Tab switching requires a certain script. The following describes how to use CSS to accomplish the same task.

The difficulty in implementing Tab switching lies in how to use CSS to receive user clicks and operate on relevant nodes. That is:

The following describes how to use two different methods to implement the requirements:

Method 1: :targetPseudo-class selector

First, we need to solve the problem:How to receive click events, The first method we use:targetReceive pseudo classes.

:targetIs a new pseudo class added by CSS3, which can be used to select the target element of the current activity. Of course, a URL with an anchor name # can point to a specific element in the document. The linked element is the target element ). It requires an id to match the target in the document.

The explanation is hard to understand. Let's look at the actual usage. Assume that ourHTMLThe Code is as follows:

<Ul class = 'nav'> <li> List 1 </li> <li> List 2 </li> </ul> <div> List 1: 123456 </div> <div> List 2: abcdefgkijkl </div>

To use:target, The HTML anchor and the HTML fragment corresponding to the anchor. So the above structure should be changed:

<Ul class = 'nav'> <li> <a href = "# content1"> List 1 </a> </li> <a href = "# content2 "> List 2 </a> </li> </ul> <div id =" content1 "> List 1 content: 123456 </div> <div id = "content2"> List 2: abcdefgkijkl </div>

In this way, the above<a href="#content1">In#content1Corresponding to list 1<div id="content1">. ANCHOR 2 corresponds to the same list 2.

Next, we can use:targetAfter receiving the Click Event and operating the corresponding DOM:

#content1,#content2{    display:none;}#content1:target,#content2:target{    display:block;}

The CSS code above, in#content1And#content2All are hidden. triggered when you click List 1.href="#content1"The page URL will change:

In this case, the Tab switch is reached. Of course, apart fromcontent1 content2Switch, ourliElement styles also need to change constantly. At this time, we need to pay more attention to the DOM structure layout.#content1:targetIt can be modified at the same time when triggered.li.

AboveHTMLAnd then modify it to the following structure:

<Div id = "content1"> List 1: 123456 </div> <div id = "content2"> List 2: abcdefgkijkl </div> <ul class = 'nav'> <li> <a href = "# content1"> List 1 </a> </li> 
For more information, seeulFrom twocontentI moved it to the bottom. Why?
Because here we need to use the sibling selector ~ .
E ~ F {cssRules}, CSS3 sibling selector (E ~ F), select all the sibling elements F after the E element.
Note that the most important sentence here is E ~ F can only select the F element after the E element, so the order is very important.
After changing the position in this way, select the character ~ You can perform the entire operation..nav.
# Content1: target ~ . Nav li {// change the background color and font color of the li element &: first-child {background: # ff7300; color: # fff ;}# content2: target ~ . Nav li {// change the background color and font color of the li element &: last-child {background: # ff7300; color: # fff ;}}
In the above CSS rules, we use ~ In#content1:targetAnd#content2:targetWhen triggered, control the two navigationliElement style.
Now there are two questions,1. How to receive click eventsAnd2. How to operate related DOMAll have been solved, and the rest is some small style patching work.
Demo stamp me: pure CSS navigation switch (: target pseudo class implementation)
Method 2:
<input type="radio">&&
<label for="">
Add<a>Tag to add page anchor to receive click events.
There is also a way to receive click events, that is, to havecheckedForm element of the attribute,<input type="radio">Or<input type="checkbox">.
Suppose there is a structure like this:
<Input class = "nav1" type = "radio"> <ul class = 'nav'> <li> List 1 </li> </ul>
For the above structure, when we click<input class="nav1" type="radio">Use:checkedClick events can be captured.
. Nav1: checked ~ . Nav li {// perform style operations}
The sibling selector is also used ~
In this way, when a click event of a form element is received, you can use the sibling selector ~ Operate on the style of its sibling element.
Click the single sequence in the following codepen.

However, there is a problem here. What we need to click is<li>Elements instead of form elements, so it is important to use<label for="">Bind a form element. Take a look at the following structure:
<Input class = "nav1" id = "li1" type = "radio"> <ul class = 'navv'> <li> <label for = "li1"> List 1 </label> </li> </ul>
Use<label>Package One<li>Element, while<label>There is an attributeforYou can bind a form element.
The above<li>There is a layer<label for="li">, Insidefor="li1"This indicates binding a form element with the id li1.
For definition in the label: The for Attribute specifies the form element to which the label is bound.
After this transformation, when we click<li>When you click an element<input class="nav1" id="li1" type="radio">This single sheet element can be:checkedThe pseudo class is captured.
At this time, we can hide the form elements on the page and click<li>Similar to clicking a form:
input{    display:none;}
In this way, we should establish the following DOM structure when applying this question:
<Div class = "container"> <input class = "nav1" id = "li1" type = "radio" name = "nav"> <input class = "nav2" id = "li2" type = "radio" name = "nav"> <ul class = 'nav'> <li class = 'active'> <label for = "li1"> List 1 </label> </li> <label for = "li2"> List 2 </label> </li> </ul> <div class = "content"> <div class = "content1"> List 1 content: 123456 </div> <div class = "content1"> List 2: abcdefgkijkl </div>
Use two single tabs, corresponding to two navigation options, and use the label binding form described above,:checkedThe second solution is to receive click events.
Check the final result:
Demo stamp me: pure CSS navigation switch (label binding input: radio &&~)
 
All the questions are summarized on my Github and sent to my blog for more communication.
At the end of this article, if you have any questions or suggestions, you can have a lot of discussions, original articles, and limited writing skills. If there are any mistakes in this article, please kindly advise.