Home >Web Front-end >JS Tutorial >Simple implementation of jQuery tab_jquery

Simple implementation of jQuery tab_jquery

WBOYOriginal: 2016-05-16 16:57:56802browse

jQuery implements tab function. First set up the interface.

There is a navigation header tab_menu and a content tab_box.

The effect to be achieved is that after clicking, the corresponding content will be displayed and other content will be hidden.

At the same time, in order to show the selected status, a background is added to the selected item to show the difference.

This time, I wrote the code myself. Let’s look at the html part first:

Copy the code The code is as follows:

 ;/li>
 < ;div class="tab_box"> 
                                   < hide">Entertainment

In HTML, you need a large div with two sub-divs inside. One serves as the navigation header tab_menu, and the other serves as the content body tab_box. The css code is responsible for laying out the html content.

css part:

Copy code

The code is as follows:

*{margin :0;padding:0;}.tab{ width:240px;

margin:50px;

 /*border:1px solid;*/
} 
.tab_menu{
 clear:both;
}
.tab_menu li{
 float:left; //Float the navigation head to the left
 text-align:center; //Float the navigation head to the left Center the text 
 list-style:none; //Remove mark symbols
 background:#F1F1F1; //Set the default background color
 border:1px solid #898989; //Set the border color
 margin- right:4px; //The distance between each li is 4px
 cursor:pointer; //After the mouse floats over, a small hand mark will appear
 padding:1px 6px; //Control the internal distance of li
 border-bottom:none; 

}
.tab_menu li.hover{
 background:#DFDFDF;
}
.tab_menu li.selected{//is selected Option to add background and color 
 color:#FFF; 
 background:#6D84B4;
}
.tab_box{
 clear:both; //Clear the impact of float effect
 height: 100px; //Set the height to 100px
 border:1px solid #898989; //Set the border style of the content body
}
.hide{//Hide the content div that needs to be hidden
 display:none ;
}


After the layout is completed, perform the jQuery action: 




Copy code

The code is as follows:

The processing here is particularly clever. It processes the option body by obtaining the index of li. It cleverly uses a hidden correspondence, which is the index value.

In this way, even if the option header and option body content do not correspond, the linkage effect can still be achieved.

Through this exercise, I feel that it is better to use my brain to think about it first. Only by discovering differences in thinking can we discover shortcomings and know the gaps. Sometimes your ideas will even be better!

Statement：

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

Previous article：How to set a request to be sent only once within a certain period_javascript skillsNext article：How to set a request to be sent only once within a certain period_javascript skills

See more

Simple implementation of jQuery tab_jquery

Related articles