Production of jquery tab page_jquery

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:

< 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);
});
});
});
});