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

Home

Web Front-end

JS Tutorial

Production of jquery tab page_jquery

May 16, 2016 pm 06:27 PM

jquery tab Bookmark page

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:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE>tab </TITLE> 
< link rel="stylesheet" type="text/css" href="css/tab.css"> 
<script type="text/javascript" src="js/jquery-1.4.2.js" ></script> 
<script type="text/javascript" src="js/tab.js"></script> 
</HEAD> 

 <BODY> 
<ul id="ularea"> 
<li class="listli">Tag1</li> 
<li >Tag2</li> < ;/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); 
}); 
}); 
}); 
}); 

Statement of this Website

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