One of the things you should pay special attention to is to set a delay to the label's MouseOver event, which prevents the user from maliciously moving the mouse, causing a large number of requests to be broadcast instead of the server crashing, using the settimeout function, mainly to the event
1 $ (). each (function () {}) This is a very important way to traverse all the labels.
2 mouseover events,
There is the key CSS style to write, control the display style,
Copy Code code 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" > Label 1</li>
<li > Label 2</li>
<li > Label 3</li>
</ul>
<div class= "Divarea" > Content 1</div>
<div> content 2</div>
<div> content 3</div>
</BODY>
</HTML>
The next step is to control the style of CSS
Copy Code code 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 spacing between the labels
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}
Down is to write control sliding JS
Copy Code code as follows:
//define global variable
var timeout;
$ (document). Ready (function () {
//Find all Li tags
$ ("Li"). each (function (index) {
$ (this). MouseOver (Fun Ction () {
//sliding doors have to set a delay time to avoid the user crazy mobile mouse, causing the server to crash, this is important
Timeout =settimeout (function () {
$ ("Div.divarea"). Removeclass ("Divarea");
$ ("Li.listli"). Removeclass ("Listli");
//$ ("div"). EQ (index). addclass ("Divarea");//Another method is: $ (div:eq (index)). addclass ("Divarea");
$ ("Div:eq" ("+index+")). AddClass ("Divarea");
$ ("li"). EQ (index). addclass ("Listli");
},
320);
$ (this). Mouseout (function () {
Cleartimeout (timeout);
});
});
});
});
