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">一个高度。

使用firebug在您的网站上测试并阻止滚动 - 例如将<div class="tab_container">的高度设置为500px - 这解决了问题...内容变量高度是什么？

您也可以使用min-height css属性。

Answer 2

您必须在hover函数中添加event参数，然后使用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();
    });
});

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

2 个答案: