Jquery special effects (2)-tab, jquery special effects Tab

Jquery special effects (2)-tab, jquery special effects Tab

Recently, the company has a page that is easy to use and I wrote it. It feels pretty good and simple ~~~~

The following shows the dynamic effect:

 

I. Main Program

<! DOCTYPE html> 
 
 
Ii. CSS style
Preliminary Layout code:
*{ margin:0; padding:0}ul{    list-style: none;}.tab{    width: 300px;    margin: 0 auto;}.tab .tab_menu{    border: 1px solid #000000;    height: 30px;    width: 300px;    }.tab .tab_menu ul li{    float: left;    width: 99px;    text-align: center;    line-height: 30px;    border-right: 1px #333333 solid;}.tab .tab_menu ul li:last-child{    border-right:none;    width: 100px;}.tab .tab_menu ul li.on{    background: #999;}.tab .tab_box > div{    width: 300px;    height: 200px;    border: #333333 solid;    border-width: 0 1px 1px 1px;}

 
The layout of the code above is as follows:

However, we only need to display the content in a framework. Therefore, we can add some minor code assistance to the above Code ~~~~~~
Further layout style code:
* {Margin: 0; padding: 0} ul {list-style: none ;}. tab {width: 300px; margin: 0 auto ;}. tab. tab_menu {border: 1px solid #000000; height: 30px; width: 300px ;}. tab. tab_menu ul li {float: left; width: 99px; text-align: center; line-height: 30px; border-right: 1px #333333 solid ;}. tab. tab_menu ul li: last-child {border-right: none; width: 100px ;}. tab. tab_menu ul li. on {background: #999 ;}. tab. tab_box> div {width: 300px; height: 200px; border: #333333 solid; border-width: 0 1px 1px; display: none; // hide all three content frameworks. The first-child attribute below only shows the content of the first framework }. tab. tab_box> div: first-child {display: block ;}
The above program adds a display: none to the. tab. tab_box> div style, and only displays the content of the first frame through the first-child attribute ~~~~~~ In this way, we can see that the layout is consistent with the animation we just started to play, and the layout is complete ~~~~~~
 
Iii. Jquery code:
$ (Function () {$ (". tab_menu ul li "). click (function () {$ (this ). addClass ("on "). siblings (). removeClass ("on"); // switch the highlighted status of the selected button var index =$ (this ). index (); // obtain the index value of the pressed Button. Note that the index starts from 0 $ (". tab_box> div "). eq (index ). show (). siblings (). hide (); // when the button is selected, the corresponding content is displayed below, and unnecessary framework content is hidden });});
Well, I am also drunk when I see such a short Jquery code. After I write such a long piece of code in the layout, I just wrote five sentences to get it done ~~~ I have already written a comment clearly. For more information, see ~~~~