Production of jquery tab page_jquery-JS Tutorial-php.cn

Production of jquery tab page_jquery

WBOY

Release： 2016-05-16 18:27:36

Original

1491 people have browsed it

One thing you need to pay special attention to here is to set a delay for the mouseover event of the label, so as to prevent the user from maliciously moving the mouse, causing a large number of requests and causing the server to crash. The setTimeout function is used, mainly for the downloaded events

1 $().each(function(){}) This is a very important way to traverse all tags

2 mouseover event,

and the key css style Write and control the displayed style,

Copy code The code is as follows:

 
tab  
< link rel="stylesheet" type="text/css" href="css/tab.css"> 
 
Tag1

Tag2
 < ;/div> 🎜>

Copy code

 The code is as follows:

ul ,li { margin:0px;
padding: 0px;

list-style:none; } li { float:left; background-color:#66CC00; margin-right:2px; //This is to set the label Spacing between padding:5px; border:1px solid white;

height:20px;

color:white; 

} 
.listli { background-color: #663333; 
border:1px solid #663333; 

} 
div { clear:left; 
width:300px; 
height:100px; 
background-color: #663333; 
border-top:0px; 
color:white; 
display:none; 
} 

.divarea { display:block; } 

 
The next step is to write js to control sliding 




Copy the code 


 The code is as follows: 

// Define global variables
var timeout;

$(document).ready(function(){ //Find all li tags $("li").each(function(index){ $(this).mouseover(function(){ //Sliding doors must set a delay time to prevent users from moving the mouse wildly and causing the server to crash. This is very importanttimeout =setTimeout (function(){

$("div.divarea").removeClass("divarea");

$("li.listli").removeClass("listli"); 
// $( "div").eq(index).addClass("divarea"); //Another way to write it is:$(div:eq(index)).addClass("divarea"); 
$("div: eq(" index ")").addClass("divarea"); 
$("li").eq(index).addClass("listli"); 
}, 
320); 
$(this).mouseout(function(){ 
clearTimeout(timeout); 
}); 
}); 
}); 
}); 