基於JQuery的多標籤實作碼_jquery

今天要分享的是基於JQuery實現的多標籤的切換，JQuery就不用過多介紹了，網上一搜一大堆資料，當然這樣的小示例也有很多，這裡只是發表一些自己的想法。

以下是本次範例所使用的HTML頁：

複製程式碼

複製程式碼

程式碼如下：

• 標籤1


• 標籤2


• 標籤3

這是內容1

這是內容2

這是內容3

現在的頁面還看不出有標籤的效果，所以為了讓頁面上出現標籤效果，請在一面加上CSS檔：

複製程式碼

程式碼如下:


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;
border-bottom: 1px solid #B0C4DE>; }
div li{
background-color:#5F9EA0;
border-bottom: 1px solid white;
float: left;
border-right: 1px solid white; :black;
height:30px;
width:60px;
line-height: 30px;
text-align: center;
}
#content div{
background;
}
#content div{
background;

}
#content div{ display:none;

clear: left; width:300px; height: 100px; } 到目前為止🎜>到目前為止🎜>到目前為止頁面還只是靜態頁面，接下來就是最主要的部分了，這部分就是實現透過滑鼠移動來切換標籤，實現動態頁面，為了達到這個目的需要再添加一個JS文件，當然基於JQuery就必然少不了JQuery的JS文件，本範例使用的是最新的jquery-1.8.1.min.js，可以到JQuery的官網獲得，下面是本次示例中實現標籤切換的JS代碼：

複製程式碼


程式碼如下:


$(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); }); }); });

到目前為止已經實現了多標籤的切換。接下了記錄下本次範例的幾個注意事項：

1、為了實現當滑鼠移到標籤(也就是

)上讓滑鼠的形狀變成手形，本次範例是透過將

裡面的內容放在裡面來實現，當然還有跟簡單的方法就是給

添加樣式cursor: pointer;。

2、在JS程式碼中用到了var timeoutID = setTimeout(function,time)，這是為了避免滑鼠快速移動到來的誤操作，time是延時的時間，function裡面的就是延時time毫秒過後要執行的內容，也就是說滑鼠移到標籤上時不會實現立即切換的動作，而是要延遲time毫秒過後才會回應切換的動作，如果滑鼠在time毫秒之內離開了標籤，就會執行clearTimeout(timeoutID)，這樣time毫秒之後就不會執行function裡面的內容，這樣就避免了滑鼠快速移動帶來的誤操作。

今天就到這裡了，希望對你會有所幫助。