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/ 如果您在点击第一个或第二个菜单项后单击或联系菜单，您将看到正在发生的事情。

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的评论中所说，除了总文本高度小于菜单之外，这实际上非常好。谢谢大家。

如何防止jQuery中的函数.fadein（）将用户发送到页面顶部？

3 个答案: