Effect of Implementation：
As shown in the illustration above, the effect we want to achieve is when the mouse is moved to a label, the corresponding content is displayed in the following content area, and the color of the corresponding label needs to be changed, as shown on the current mouse position on "label 1", the content area is displayed as "I am content 1" and " The color of label 1 is darker than "label 2" and "Label 3", and the same mouse moves to "label 2" and "Label 3" to show "I am content 2" and "I am content 3". This is the effect of CSS and JS with the implementation. Let's take a look at the specific code below:
First look at the HTML code：
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Label Page Effect </title>
<link href= ". /css/tab.css "rel=" stylesheet "type=" Text/css "/>"
<script language= "JavaScript" type= "Text/javascript" src= ". /js file/jquery.js "></script>
<script language= "JavaScript" type= "Text/javascript" src= ". /js file/tab.js "></script>
<body>
<ul id= "Tabfirst" >
<li class= "Tabin" > Label 1</li>
<li> label 2</li>
<li> label 3</li>
</ul>
<div id= "Contentnow" class= "Contentfirst contentin" > I am Content 1</div>
<div id= "Contentnow" class= "Contentfirst" > I am Content 2</div>
<div id= "Contentnow" class= "Contentfirst" > I am Content 3</div>
</body>
JS code to achieve the idea is very simple, first to each tab to register a mouseover function, when the mouse moved to any one of the tags will be executed moveover function body code. The function body code first obtains the current node, hides the original displayed content, and then displays the corresponding label content according to the incoming node index. In the code we can see that in addition to the changes to the node style in HTML, we also use the SetTimeout function, which is the function of delaying the execution time of the function, the following code in the delay time is 300 milliseconds, when the mouse is moved to the label is not executed immediately after the delay of 300 milliseconds, If the mouse is moved out of the label area within 300 milliseconds, the code is no longer executed.
Copy Code code as follows:
$ (document). Ready (function () {
var Timeoutid;
$ ("#tabfirst Li"). each (function (index) {
Each packaged Li's jquery object executes the code in the function
Index is the indexed value of the LI corresponding to all Li arrays that are currently executing this function code
Once you have the value of index, you can find the content area for the current label
$ (this). MouseOver (function () {
var LiNode = $ (this);
Timeoutid = settimeout (function () {
Hide the content that was originally displayed
$ ("Div.contentin"). Removeclass ("Contentin");
Remove the Tabin attribute from the label that originally had the Tabin attribute
$ ("#tabfirst li.tabin"). Removeclass ("Tabin");
Displays the content area for the current label
$ ("Div.contentfirst"). EQ (index). addclass ("Contentin");
$ ("Div.contentfirst:eq (" + Index + ")"). AddClass ("Contentin");
Increase the current label Tabin property
Linode.addclass ("Tabin");
},300);
}). mouseout (function () {
Cleartimeout (Timeoutid);
});
});
});
In addition to this effect, we can also use the same principle for each label to register the click Function, when clicking on each label in the original content area can be loaded with different pages or any part of the page, interested in words can click here to download the source code. The source contains the different functions that are implemented by the two different functions mentioned in the paper.
