Jquery的tab點選切換,懸停切換,延遲切換
阿新 • • 發佈:2019-01-28
$(function(){
//tab選項卡點選
$(".title li").click(function(){ //標題點選
var index=$(this).index(); //獲得當前點選標題的下標
$(this).addClass("active").siblings().removeClass("active"); //給當前選項新增選中,其他移除選中
$(".content .contentlist" ).eq(index).show().siblings().hide(); //對應下標的內容框顯示,其他隱藏
});
//tab選項卡懸停
$(".title li").hover(function(){ ////標題懸停
var index=$(this).index(); //獲得當前點選標題的下標
$(this).addClass("active").siblings().removeClass("active"); //給當前選項新增選中,其他移除選中
$(".content .contentlist").eq(index).show().siblings().hide(); //對應下標的內容框顯示,其他隱藏
});
//tab選項卡延遲切換
var timer=null;
$(".title li").hover(function(){
if(timer){
clearTimeout(timer);
timer=null ;
} //如果定時器存在的話就清除
var index=$(this).index(); //獲得當前點選標題的下標
timer=setTimeout(function(){
$(".title li").eq(index).addClass("active").siblings().removeClass("active"); //給當前選項新增選中,其他移除選中
$(".content .contentlist").eq(index).show().siblings().hide(); //對應下標的內容框顯示,其他隱藏
},1000);
});
})