如何防止jQuery中的.fadein()函数将用户发送到页面的顶部?

Question

我有一个菜单，我基本上点击并隐藏当前p和淡出相应的按钮文本。问题是，它让我的页面直接跳到顶部。

下面是菜单的html:

<li class="sub"><a href="#" class="sub_ha1"> 
   › Instalação/Configuração de Componentes</a>
</li>

下面是相应文本的html

:

<div id="sub_ha1" class="text" style="display:block;">
  <img src="../images/serv/ha1.jpg" alt="">
  <h1> Instalação/Configuração de Componentes - 35€ </h1>
  <p>Chamamos de hardware a todos os componentes ..... </p>
</div>

这是jQuery:

$("#navigation a.sub_ha1").click(function () {
$(".text").hide();
$("#sub_ha1").fadeIn();
return false;
});

我想要的是一种防止它的方法，因为它只会让你在浏览几个菜单后感到讨厌。

感谢

编辑:http://jsfiddle.net/M2AE6/如果你在点击第一个或第二个菜单项后点击about或contact菜单，你会看到发生了什么。

Answer 1

您也可以更改链接href.

<a href="javascript:void(0);">text</a>

Answer 2

虽然您的代码看起来是正确的，但您可以尝试下面这个:

$("#navigation a").click(function(e){
   e.preventDefault(); // <----stop it here
   $(".text").hide();
   $("#"+this.className).fadeIn(); // <--this will get you the specific div you want to fade In.
   // $("[id='"+this.className + "']").fadeIn();// <---another way to do it
});

Answer 3

正如tcovo在对主要问题what if you use function() { $(".text").not($("#sub_ha1").fadeIn()).hide(); return false; } so that #sub_ha1 gets shown (initially with opacity 0) before the other .text are hidden? – tcovo的评论中所说，除了总文本高度小于菜单时，这实际上非常有效。谢谢所有。