JS implementation of the label page effect (with CSS) _javascript skills

Source: Internet
Author: User
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.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.