JS implements tab page effect (with css)_javascript skills-JS Tutorial-php.cn

JS implements tab page effect (with css)_javascript skills

WBOY

Release： 2016-05-16 17:38:21

Original

1103 people have browsed it

Achieved effect:
JS implements tab page effect (with css)_javascript skills

As shown in the picture above, it is the produced tab page. The effect we want to achieve is that when the mouse moves to a certain tab, the following content The corresponding content is displayed in the area, and the color of the corresponding label needs to be changed. As shown in the figure, the current mouse position is on "label 1", then the content displayed in the content area is "I am content 1", and the "label 1" The color is darker than "Tag 2" and "Tag 3". Similarly, when the mouse moves to "Tag 2" and "Tag 3", "I am content 2" and "I am content 3" are displayed. This effect is achieved by the cooperation of CSS and JS. Let’s take a look at the specific code:

First look at the HTML code:

Copy code The code is as follows:

Tab page effect

< ;/head>

tab 1

Tag 2

Tag 3

I am content 1< ;/div>

I am content 2

I am Content 3

The JS code implementation idea is very simple. First, register a mouseover function for each label item. When the mouse moves over any label, the code in the moveover function body will be executed. The function body code first obtains the current node, hides the originally displayed content, and then displays the content corresponding to the corresponding label based on the incoming node index. In the code, we can see that in addition to changing the node style in HTML, the setTimeout function is also used. The function of this function is to delay the execution time of the function. The delay time in the following code is 300 milliseconds, that is, when the mouse moves to the label The code is not executed immediately but delayed for 300 milliseconds. If the mouse moves out of the label area within 300 milliseconds, the code will no longer be executed.

Copy code The code is as follows:

 
$(document).ready(function(){ 
var timeoutid; 
$("#tabfirst li").each(function(index){ 

//Each wrapped JQuery object of li will execute the code in the function
/ /index is the index value in the array composed of all li corresponding to the li currently executing this function code 
//With the value of index, you can find the content area corresponding to the current label 
$(this). mouseover(function(){ 
var liNode = $(this); 
timeoutid = setTimeout(function(){ 
//Hide the originally displayed content
$("div.contentin" ).removeClass("contentin"); 
//Remove the tabin attribute from the tag that originally had the tabin attribute 
$("#tabfirst li.tabin").removeClass("tabin"); 
// Display the content area corresponding to the current tag 
$("div.contentfirst").eq(index).addClass("contentin"); 
//$("div.contentfirst:eq(" index " )").addClass("contentin"); 
//Add the tabin attribute to the current label 
liNode.addClass("tabin"); 

},300); 

}).mouseout(function(){ 

clearTimeout(timeoutid); 
}); 
}); 
}); 

Except this In addition to the effect, we can also use the same principle to register a click function for each label. When each label is clicked, different pages or part of any page can be loaded in the original content area. If you are interested, you can click here to download the source code. The source code contains different functions implemented by the two different functions mentioned in the article.