jQuery淡化使页面跳转
出于某种原因，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
它是主要内容上方的标签链接。 每一个都在该类别的前五个post中消失。
提前致谢。 马修。
问题不在于链接，尽管我理解这是第一个想法，它是过渡本身。
对于瞬间（一帧，确切地说，在隐藏和淡入的第一帧之间13ms），选项卡面板所在的区域中没有内容 ，因此页面向上滚动，因为文档较短。
为避免这种情况，您需要防止文档变小，幸运的是您的特定页面非常简单。 只需改变这个：
对此：
或者给它外部CSS：
.tabs_container { height: 516px; }
这样可以防止.tab_content div因为该帧的大小而无法调整页面大小。
你不能使用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; }
不要返回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(); }); });
但问题与返回false无关，因为没有遵循链接。 问题是您隐藏当前选项卡内容，然后淡入新的内容。 这会导致您的身体高度发生变化，因此滚动条会变短，因为隐藏旧内容会使您弹出到顶部。 您可以尝试获取div的当前高度，将加载的内容的高度以及动态更改div的高度。
我认为使用fadeTo比通过CSS分配高度更清晰。 这样您就不必担心要交换或转出的内容的高度。
传递到函数中的一些内容淡出和数据淡入的示例（例如，作为ajax调用的结果）：
请注意，您必须使用fadeTo淡化内容（而不是fadeIn），以便将不透明度返回到可见的内容。
function swapData(data) { sel = '#tab_container'; $(sel).fadeTo(50, 0.10, function() { $(sel).html(data).fadeTo(300, 1) } ); }
另一个有用的提示，当有一个链接的 url时，你可以在脚本完成执行return false;时return false; 。 这将停止执行链接的默认操作，即转到href。 对于没有JS的浏览器，用户会像往常一样重定向到url。