1. 程式人生 > >Jquery的tab點選切換,懸停切換,延遲切換

Jquery的tab點選切換,懸停切換,延遲切換

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