今天要分享的是基於JQuery實現的多標籤的切換，JQuery就不用過多介紹了，網上一搜一大堆資料，當然這樣的小示例也有很多，這裡只是發表一些自己的想法。
以下是本次範例所使用的HTML頁：
複製程式碼
複製程式碼
程式碼如下:
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;
複製程式碼
程式碼如下:
$(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裡面的內容，這樣就避免了滑鼠快速移動帶來的誤操作。
今天就到這裡了，希望對你會有所幫助。
