Today to share is based on jquery implementation of the multiple-label switch, jquery do not have to introduce too much, a lot of information on the Internet, of course, such a small sample there are many, here just to publish some of their own ideas.
The following is the HTML page used by this example:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
<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-->
<body>
<div id= "Contentab" >
<ul>
<li class= "ShowTab" ><a href= "/" > Label 1</a></li>
<li><a href= "/" > Label 2</a></li>
<li><a href= "/" > Label 3</a></li>
</ul>
<div id= "Content" >
<div class= "Showcontent" > This is Content 1</div>
<div> This is the content 2</div>
<div> This is the content 3</div>
</div>
</div>
</body>
Now the page does not see the effect of a label, so in order to make the label on the page effect, add a CSS file to the side:
Copy Code code as follows:
a{
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 just static page, the next is the most important part, this part is to achieve through the mouse movement to switch the label, to achieve dynamic page, in order to achieve this goal needs to add a JS file, of course, based on jquery will inevitably be without jquery js file, This example uses the latest jquery-1.8.1.min.js, which can be obtained from the website of jquery, following the JS code that implements the label switch in this example:
Copy Code code 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);
});
});
});
A multiple-label switch has been implemented so far. The following are some considerations for documenting this example:
1, in order to achieve when the mouse moved to the label (that is, <li>) to make the shape of the mouse into a hand, this example is through the contents of <li> inside the <a> to achieve, of course, and the simple way is to <li> Add style cursor:pointer;.
2, in the JS code used to the var Timeoutid = settimeout (Function,time), which is to avoid the rapid movement of the mouse to the wrong operation, time is a delay, the function inside is a delay after a millisecond to execute the content, That is, the mouse moved to the label will not be implemented immediately switch action, but to delay the time milliseconds before the response to the switch action, if the mouse in time milliseconds left the label, will execute Cleartimeout (Timeoutid), This will not execute the contents of the function after time milliseconds, thus avoiding the misoperation caused by the rapid movement of the mouse.
I'm here today and I hope it will help you.
