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

问题不在于链接，但我知道这是第一个想法，它本身就是过渡。

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

为避免这种情况，您需要防止文档变小，幸运的是您的特定页面非常简单。只需改变一下：

<div class="tab_container">

对此：

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

或者给它外部CSS：

.tabs_container { height: 516px; }

这样可以防止{1}} 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淡化内容（而不是fadeIn），以便将不透明度返回到可见的内容。

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

Answer 5

另一个有用的提示，当链接有<noscript> url时更是如此，当脚本执行完return false;时，您可以返回false。这将停止执行链接的默认操作，即转到href。对于没有JS的浏览器，用户将正常重定向到URL。

jQuery淡化使页面跳转

5 个答案: