Home > Developer > JavaScript
Implementation Effect:
As shown in, the created tab displays the corresponding content in the content area below when you move the cursor to a tag, and the color of the corresponding tab needs to be changed, as shown in, the current mouse position is on "tag1", and the content displayed in the content area is "I am content 1 ", in addition, the color of "tag1" is darker than that of "tag2" and "tag3, when you move the mouse to "label 2" and "label 3", "I am content 2" and "I am content 3" are displayed ". This effect is achieved in combination with CSS and JS. Let's take a look at the specific code:
First, let's look at the HTML code:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> tab 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>
</Head>
<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>
</Html>
The JS Code Implementation idea is very simple. First, register a mouseover function for each label item. When you move the cursor over any label, the code in the moveover function will be executed. The function body code first obtains the current node, hides the original content, and then displays the content corresponding to the corresponding label based on the input node index. In the code, we can see that in addition to modifying the node style in HTML, we also use the setTimeout function, which is used to delay the execution time of the function, the latency in the following code is 300 milliseconds, that is, when the mouse moves to the label, it is not executed immediately, but is executed after a delay of 300 milliseconds, if you move the mouse out of the tag area within 300 milliseconds, the code is no longer executed.
Copy codeThe Code is as follows:
$ (Document). ready (function (){
Var timeoutid;
$ ("# Tabfirst li"). each (function (index ){
// Every wrapped JQuery object of li will execute the code in the function
// Index is the index value corresponding to the li that currently executes the function code in the array consisting of all li
// With the index value, you can find the content area corresponding to the current tag.
$ (This). mouseover (function (){
Var liNode = $ (this );
Timeoutid = setTimeout (function (){
// Hide the original content
$ ("Div. contentin"). removeClass ("contentin ");
// Remove the label with the original tabin attribute from the tabin attribute
$ ("# Tabfirst li. tabin"). removeClass ("tabin ");
// Display the content area corresponding to the current tag
$ ("Div. contentfirst"). eq (index). addClass ("contentin ");
// $ ("Div. contentfirst: eq (" + index + ")"). addClass ("contentin ");
// Add the tabin attribute to the current tag
LiNode. addClass ("tabin ");
},300 );
}). Mouseout (function (){
ClearTimeout (timeoutid );
});
});
});
In addition to this effect, we can also use the same principle to register a click function for each tag. When clicking each tag, we can load different pages or any part of the page in the original content area, if you are interested, click here to download the source code. The source code contains the different functions implemented by the two different functions mentioned in this article.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
