Use bootstrap's tab plug-in to create a layer switching effect (I think it will mislead you, please watch it for fun)_html/css_WEB-ITnose

My friends, I’m really bad at JS, so I always want to be lazy, so I changed the tab plug-in in order to achieve the effect (please give me a pat, I’m a novice) , very pure, but the little heart is also very fragile)...

The project I did recently was based on consideration of future mobile device compatibility, so I used Bootstrap. There is an effect on the homepage that requires the mouse to click on different buttons to fix the position of the layer content (did I describe it clearly Orz...), as shown below:

                                Click 1, 2 respectively, The corresponding content changes when pressing 3 and 4 buttons.

I was confused, this is very similar to the tab plug-in~~just click the button to change the layer. If you look for independent plug-ins elsewhere, my memory will sooner or later make the project js file so messy that I don’t even know what the function file is, so let’s change the style. Let’s do a before and after comparison:

Before modification:

After modification: (A lot has been removed when it comes to the public, please take a look at it, don’t comment on the color matching, weakness~~)

Write down the ideas below:

1. Implementation of the left button

The original tab button should be changed to the left side of the content layer.

<.> 1.1 Look at the structure Ha

a UL (button), a div (content).

So what I did was to directly add a Class to ul: a93b40c7391344a2a259c9049703f62e, and add 0d29a2beadfc3069b5ffad5e0b3b4f1d.

The next step is to add styles to the 25edfb22a4f469ecb59f1190150159c6 inside ff6d136ddc5fdfeffaf53ff6ee95f185. Become a block element, set length and width, float: left, etc.

1.2Font Awesome font

Here is a knowledge point for you to remember:

In order to The color changes as the mouse moves over the chart, so the icon in each button uses an icon. Font settings. Font Awesome V4.3.0 is used here.

There are so many icons but I don’t have what I need, so I used an icon combination. The method is as follows:

                                                                                                                                                                                                                         ​>

Then I went to play, I will write about it later, la la la...

          <li class="li_1 active">           <a data-toggle="tab" href="#panel-11">            <span class="fa-stack fa-lg">              <i class="fa fa-genderless fa-stack-2x"></i>              <i class="fa fa-level-up fa-stack-1x"></i>            </span><br/></a>          </li>