懸停在選項卡上強制瀏覽器滾動到頁面頂部

Question

我的代碼存在問題。

我用這個JS

$(document).ready(function() { 
//Default Action 
    $(".tab_content").hide(); //Hide all content 
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab 
    $(".tab_content:first").show(); //Show first tab contentDocument 

//On Hover Event 
    $("ul.tabs li").hover(function() { 
    $("ul.tabs li").removeClass("active"); //Remove any "active" class 
    $(this).addClass("active"); //Add "active" class to selected tab 
    $(".tab_content").hide(); //Hide all tab content 
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content 
    $(activeTab).fadeIn(); //Fade in the active content 
    return true; 
    }); 
}); 

當我將鼠標懸停在一個標籤，內容變更，但瀏覽器滾動頁面的頂端。 我想要 - 當我將鼠標懸停在標籤上時，頁面將保持當前的滾動位置，並且內容被更新。

Answer 1

的問題發生，因爲當您執行hide()的頁面高度減少了強制瀏覽器滾動到頁面頂部（即不需要滾動來顯示整個頁面）。給你的容器div：<div class="tab_container">一個高度。

在您的網站上使用螢火蟲測試並防止滾動 - 例如將<div class="tab_container">的高度設定爲500px - 這樣可以解決問題......內容變量高度？您可以使用min-height css屬性。

Answer 2

您必須添加在懸停功能的事件參數，然後取消默認事件從瀏覽器處理與的preventDefault：

//On Click Event 
$("ul.tabs li").hover(function() { 
    $("ul.tabs li").removeClass("active"); //Remove any "active" class 
    $(this).addClass("active"); //Add "active" class to selected tab 
    $(".tab_content").hide(); //Hide all tab content 
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content 
    $(activeTab).fadeIn(); //Fade in the active content 
    $(this).find("a").click(function(e){ 
     e.preventDefault(); 
    }); 
});