一、什么是tab欄切換
在我們瀏覽網頁時，經常會遇到在一些登錄注冊模塊或者新聞模塊會有以下這樣的情況，這樣的效果我們就稱為tab欄切換，
二、實作切換效果的原理
當我們點擊上面的第一個小標題時，下面的第一個內容就會出現；當我們點擊第二個小標題時，第二個內容會相應的出現，就實作了同一個板塊顯示不同內容的效果，
三、方法
（一）、獲取元素添加滑鼠點擊事件（此時只能實作最簡單的顯示與隱藏）
$(function() {
// 滑鼠經過
$(".nav>li").mouseover(function() {
// $(this) jQuery 當前元素 this不要加引號
// show() 顯示元素 hide() 隱藏元素
$(this).children("ul").show();
});
// 滑鼠離開
$(".nav>li").mouseout(function() {
$(this).children("ul").hide();
})
})（二）、用slideDown和slideUp實作切換時的滑動效果
$(function() {
滑鼠經過
$(".nav>li").mouseover(function() {
// $(this) jQuery 當前元素 this不要加引號
// show() 顯示元素 hide() 隱藏元素
$(this).children("ul").slideDown(200);
});
// 滑鼠離開
$(".nav>li").mouseout(function() {
$(this).children("ul").slideUp(200);
});
})（三）、事件切換 hover 就是滑鼠經過和離開的復合寫法
$(function() {
$(".nav>li").hover(function() {
$(this).children("ul").slideDown(200);
}, function() {
$(this).children("ul").slideUp(200);
});
})（四）、事件切換 hover只寫一個函式，那么滑鼠經過和滑鼠離開都會觸發這個函式，因為我們的tab欄切換是同一種效果，所以可以使用這個方法，
$(function() {
$(".nav>li").hover(function() {
$(this).children("ul").slideToggle();
});
})四、總結
不論我們學習的知識點有多么復雜和繁瑣，我們一定要學會總結分析，其實我們會發現很多知識點都是相互關聯的，也許現在的你不知道自己現在學的知識是干嘛用的，但是你要相信，在未來的某一刻，現在學的知識一定會照亮你前進的遙遠路途，（博主好久沒有更新的時候有在認真學習哦！所以我們都要一起加油呀！）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/290110.html
標籤：其他