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:

, and add
.

The next step is to add styles to the

inside

. 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>

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn