Home > Others

JQuery-Based Multi-tag implementation code

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Today, I want to share with you the multi-tag switching based on JQuery. JQuery does not need to be introduced too much. I search a lot of information on the Internet. Of course there are also many such small examples, here is just to express some of your own ideas.

The following is the HTML page used in this example:

Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml" lang = "en">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> JQueryProject1 </title>
<Meta name = "author" content = "Frank_Ren"/>
<Link type = "text/css" rel = "stylesheet" href = "css/myCSS.css"/>
<Script type = "text/javascript" src = "js/jquery-1.8.1.min.js"> </script>
<Script type = "text/javascript" src = "js/myJSFile. js"> </script>
<! -- Date: 2012-09-17 -->
</Head>
<Body>
<Div id = "contenTab">
<Ul>
<Li class = "showTab"> <a href = "/"> label 1 </a> </li>
<Li> <a href = "/"> label 2 </a> </li>
<Li> <a href = "/"> tag 3 </a> </li>
</Ul>
<Div id = "content">
<Div class = "showContent"> This is content 1 </div>
<Div> This is content 2 </div>
<Div> This is content 3 </div>
</Div>
</Div>
</Body>
</Html>

The current page does not see any tag effect, so to make the page show a tag effect, add a CSS file to one side:Copy codeThe Code is as follows: {
Display: block;
Text-decoration: none;
Color: white;
}
# ContenTab ul {
List-style: none;
Padding: 0px;
Margin: 0px;
}
# Content div. showContent {
Line-height: 100px;
Display: block;
Background-color: # B0C4DE;
}
. ShowTab {
Background-color: # B0C4DE;
Border-bottom: 1px solid # B0C4DE;
}
Div li {
Background-color: #5F9EA0;
Border-bottom: 1px solid white;
Float: left;
Border-right: 1px solid white;
Color: black;
Height: 30px;
Width: 60px;
Line-height: 30px;
Text-align: center;
}
# Content div {
Background-color: # B0C4DE;
Display: none;
Clear: left;
Width: 300px;
Height: 100px;
}

So far, the page is still a static page, and the next step is the main part. This part is to switch the tag by moving the mouse to implement dynamic pages, in order to achieve this need to add another JS file, of course, based on JQuery will inevitably be indispensable JQuery JS file, this example uses the latest jquery-1.8.1.min.js, can be obtained on the JQuery official website, the following is the JS Code for Label Switching in this example:Copy codeThe Code is as follows: $ (function (){
$ ("# ContenTab li"). each (function (){
Var tab = $ (this );
Var timeoutID;
Tab. hover (function (){
TimeoutID = setTimeout (function (){
$ (". ShowTab"). removeClass ("showTab ");
$ (". ShowContent"). removeClass ("showContent ");
Tab. addClass ("showTab ");
$ ("# Content div"). get ($ ("# contenTab li"). index (tab). addClass ("showContent ");
},300 );
}, Function (){
ClearTimeout (timeoutID );
});
});
});

Multi-tag switching has been implemented so far. Next, we will record several notes for this example:

1. To change the shape of the mouse to the hand shape when the mouse moves to the label (that is, <li>, this example is implemented by placing the content in <li> in <a>. Of course, a simple method is to add the style cursor: pointer to <li> ;.

2. var timeoutID = setTimeout (function, time) is used in JS Code. This is to avoid misoperation when the mouse moves quickly, and time is the delay time, the function contains the content to be executed after the delay time in milliseconds. That is to say, when you move the mouse over the tag, the switchover will not be performed immediately. Instead, the switchover will be responded after the delay time in milliseconds, if the mouse leaves the tag within time milliseconds, clearTimeout (timeoutID) will be executed, so that the content in the function will not be executed after time milliseconds, this avoids misoperation caused by the rapid movement of the mouse.

Today, we are here to help you.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More