jQuery fade 使页面跳转

Question

由于某种原因，jQuery 的 fadeIn 使我的页面跳转到顶部。它淡入的每个不同的 div 都会使滚动条变得不同的大小，所以我认为这可能就是“return false”不起作用的原因。这是代码：

    jQuery(document).ready(function($) {

//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {

    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide();
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn('slow', function() {
  $(this).show(); });
return false
});
});

如果有人可以提供帮助，我将不胜感激。这是网站：

www.matthewruddy.com/demo

这是主要内容上方的选项卡式链接。每一篇文章都会消失在该类别的前五名帖子中。

提前致谢。马修.

Answer 1

问题不在于链接，尽管我明白这是第一个想法，而是过渡本身。

在一瞬间（一帧，准确地说是 13 毫秒，在隐藏和淡入的第一帧之间），选项卡面板所在区域没有内容，因此页面向上滚动，因为该文件较短。

为了避免这种情况，您需要防止文档变小，幸运的是，对于您的特定页面来说，这非常容易。只需将其更改

<div class="tab_container">

为

<div class="tab_container" style="height: 516px;">

：或为其提供外部 CSS：

.tabs_container { height: 516px; }

这将防止该一帧的 .tab_content div 消失，从而调整页面大小。

Answer 2

您不能使用 fadeTo 代替 fadeIn。例如：

//Hide all content
$(".tab_content").hide();
//Activate first tab
$(".TabsScheda li:first").addClass("active").show();
//Show first tab content
$(".tab_content:first").show(); 

//On Click Event
$(".TabsScheda li").click(function() {
    //Remove any "active" class
    $(".TabsScheda li").removeClass("active");
    //Add "active" class to selected tab
    $(this).addClass("active");
    //Hide all tab content
    $(".tab_content").fadeTo("slow", 0);
    //Find the href attribute value to identify the active tab + content
    var activeTab = $(this).find("a").attr("href");
    //Fade in the active ID content
    $(activeTab).fadeTo("slow", 1);
    return false;
}

Answer 3

不要返回 false，而是执行 e.preventDefault() （为什么可以在这里找到：http://css-tricks.com/return-false-and-prevent-default/)：

$("ul.tabs li").click(function(e) {
    e.preventDefault()
    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide();
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn('slow', function() {
    $(this).show(); });

});

但问题与 return false 无关，因为未遵循该链接。问题是您隐藏当前选项卡内容，然后淡入新选项卡内容。这会导致您身体的高度发生变化，因此滚动条会变短，因为旧内容被隐藏，使您弹出到顶部。您可以尝试获取 div 的当前高度、将要加载的内容的高度并动态更改 div 的高度。

Answer 4

我认为使用 fadeTo 比通过 CSS 分配高度更干净的解决方案。这样您就不必担心换入或换出的内容的高度。

淡出某些内容并淡入传入函数的数据的示例（例如，作为 ajax 调用的结果）：

请注意，您必须使用 fadeTo 淡入内容（而不是仅仅淡入）为了将不透明度恢复为可见的东西。

function swapData(data)
{
  sel = '#tab_container';
  $(sel).fadeTo(50, 0.10, function() { $(sel).html(data).fadeTo(300, 1) } );
}

Answer 5

另一个有用的提示，尤其是当链接存在 url 时，您可以在脚本完成执行 return false; 时返回 false。这将阻止执行链接的默认操作，即转到 href。对于没有 JS 的浏览器，用户会正常重定向到该 url。