Multi-tag implementation code based on JQuery

Multi-tag implementation code based on JQuery_jquery

WBOY

Release： 2016-05-16 17:49:54

Original

1114 people have browsed it

What I want to share today is multi-tab switching based on JQuery. JQuery does not need to be introduced too much. I searched a lot of information on the Internet. Of course, there are many such small examples. Here I just express some of my own ideas.

The following is the HTML page used in this example:

Copy the code The code is as follows:

JQueryProject1

Tab 1

Tab 2< /a>

Tag 3

This is content 1

This is content 2

This is content 3

Now The page does not have the effect of tags, so in order to make the tag effect appear on the page, add a CSS file to one side:

Copy code The code is 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; 
} 

Page so far It’s just a static page, and the next step is the most important part. This part is to switch tags by moving the mouse and realize dynamic pages. In order to achieve this goal, you need to add another JS file. Of course, JS based on JQuery must be indispensable. file, this example uses the latest jquery-1.8.1.min.js, which can be obtained from the JQuery official website. The following is the JS code to implement label switching in this example:

Copy code The 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 ); 
}); 
}); 
}); 

So far, multi-tab switching has been implemented. Here are a few notes on this example:

1. In order to change the shape of the mouse into a hand shape when the mouse moves over the label (i.e.

), this example is This is achieved by placing the content in

inside . Of course, a simple method is to add the style cursor: pointer; to

.

2. Var timeoutID = setTimeout(function, time) is used in the JS code. This is to avoid misoperation when the mouse moves quickly. Time is the delay time, and the delay time in the function is The content to be executed after milliseconds, that is to say, when the mouse moves to the label, the immediate switching action will not be implemented, but the switching action will be delayed after time milliseconds. If the mouse leaves the label within time milliseconds, ClearTimeout(timeoutID) will be executed, so that the content in the function will not be executed after time milliseconds, thus avoiding misoperations caused by rapid mouse movement.

That’s it for today, I hope it will be helpful to you.