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:
So what I did was to directly add a Class to ul:
The next step is to add styles to the
1.2Font Awesome font
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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
