Plain CSS Navigation bar tab switch scheme

Instead of Javascript, use a pure CSS scheme to implement a similar navigation bar switch:

The power of CSS is sometimes beyond our imagination, Tab switching, in general, it really needs a certain script to achieve. Let's see how to do the same thing with CSS.

The difficulty in implementing TAB switching is how to use CSS to receive user clicks and manipulate related nodes. That is:

How to receive Click events

How to manipulate related dom

Here's a look at how to implement the requirements using two different approaches:

Law one:: Target pseudo-class selector

First of all, the problem we're trying to solve is how to receive the Click event, and here's the first method we use: Target pseudo-class receive.

: Target is a new pseudo-class CSS3 that can be used to pick the target element of the current activity. Of course, with the anchor name # at the end of the URL, you can point to a specific element within 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, look at the actual usage, assuming our HTML code is as follows:

  
   
  
    
   
    
   
Listing 1
    
   
    
   
Listing 2
  
   
  
List 1 Contents: 123456 Listing 2 Contents: ABCDEFGKIJKL

Because you want to use: target, you need an HTML anchor point and an HTML fragment corresponding to the anchor point. So the structure above is going to become:

  
   
  
    
   
    
   
Listing 1
    
   
    
   
Listing 2
  
   
  
List 1 Contents: 123456 Listing 2 Contents: ABCDEFGKIJKL

In this way, the anchor point in the above #content1 corresponds to listing 1. The anchor point 2 corresponds to the same list 2.

Next, we can use: Target to accept the Click event, and manipulate the corresponding DOM:

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

The above CSS code, the first page of the #content1 and #content2 are hidden, when the click on the list 1 to trigger href= "#content1", the page URL will be changed:

1. Change from www.example.com to Www.example.com#content1

2. Next trigger #content1: target{} This CSS rule, #content1 elements from Display:none to Display:block, click on List 2 is also true.

This way, the TAB switch is reached. Of course, in addition to the Content1 Content2 switch, our LI element style is also changing, this time, we need to be more careful in the DOM structure layout, in the #content1: Target trigger can simultaneously modify the Li style.

On the basis of the above HTML, and then modify it, into the following structure:

List 1 Contents: 123456 Listing 2 Contents: ABCDEFGKIJKL
  
   
  
    
   
    
   
Listing 1
    
   
    
   
Listing 2
  
   
  

Carefully contrast with the above structure of similarities and differences, here I just put ul from two content above moved to below, why do this?

Because you need to use the sibling selector ~.

e~f{Cssrules}, CSS3 sibling selector (e~f), selects all sibling elements behind the E element F.

Note here, the most important sentence is that e~f can only select the F element after the E element, so the order is very important.

After this position is swapped, the entire. Nav style can be manipulated through the sibling selector ~.

#content1: Target ~ nav li{    //change the background color and font color of LI elements    &:first-child{        background: #ff7300;        Color: #fff;    }} #content2: Target ~ nav li{    //change the background color and font color of LI elements    &:last-child{        background: #ff7300;        Color: #fff;    }}

In the above CSS rules, we use the ~ selector to control the style of the two navigation Li elements separately when #content1: Target and #content2: Target triggers.

At this point two questions, 1. How to receive click events with 2. How to manipulate the relevant DOM has been resolved, and the rest is some small-style patching work.

Law II:&&

The above method receives a click event by adding a label to the page anchor point.

There is also a way to receive a click event, which is a form element that has the checked attribute,Or。

Suppose there is such a structure:

 
 
  
  
    
  
   
   
Listing 1
 
  
  

For the above structure, when we click on theIn the case of a single box form element, use: Checked can capture a click event.

. nav1:checked ~. Nav li {  //Style action}

Also used the Brother selector ~

This way, when you receive a click event for a FORM element, you can manipulate the style of its sibling elements through the sibling selector ~.

However, here's a question for our Tab switch, to click on IS

elements, not form elements, so it is important here to use bound form elements. Look at the following structure:

 
   
    
  
    
    
     
   
Listing 1
   
    
  

By using the package one

element, and there is an attribute for which a form element can be bound.

Above the

, there is a layer in which the for= "li1" means a form element with a binding ID of li1.

The for definition in the label tag: The For property specifies which form element the label binds to.

After this transformation, when we click on

element, the equivalent of clicking on theThis single-box form element, while this form element is clicked, can be captured by: checked Pseudo-class.

At this point, we can hide the form elements on the page and click

Equivalent to clicking on the form:

input{    Display:none;}

So, to apply this topic, we should build the following DOM structure:

            
  
   
  
        
   
    
   
Listing 1
        
   
    
   
Listing 2
    
  
   
  
            List 1 Contents: 123456        List 2 contents: ABCDEFGKIJKL    

Using two radio boxes, respectively, corresponding to two navigation options, using the label binding form described above: Checked receive Click events, you can get the second solution.

