悬停在选项卡上强制浏览器滚动到页面顶部

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