Question

Javascript和jQuery新手在这里。我在我的主页上写了一个链接，该链接应该切换其下方元素中文本块的可见性。这是html，后面是实现显示/隐藏行为的Javascript块。

<a href="#hh_bibtex">Show BibTeX</a>
<div class="bibtex" id="hh_bibtex">
  This text should appear and disappear.
</div>

<script type="text/javascript">

  $("#hh_bibtex").hide();

  $("[href='#hh_bibtex']").click(function(){
    if ( $(this).html() == "Show BibTeX" ) {
      $(this).html("Hide BibTeX");
      $("#hh_bibtex").show();
    } else {
      $(this).html("Show BibTeX");
      $("#hh_bibtex").hide();
    }
  });

</script>

这样做没问题，除了一个非常讨厌的怪癖：当我点击链接显示文本块时，不仅文本出现，而且页面立即向下滚动，以便“此文本应该出现和消失”是在浏览器窗口的顶部。这非常迷惑。幸运的是，相反的情况并非如此：当我点击链接使文本消失时，窗口不会滚动。

如何消除这种不受欢迎的滚动？

Answer 1

糟糕，抱歉：找到了答案here。

Answer 2

感谢您进行一些后续跟踪，并提供了找到答案的链接。对我来说，关键在于放置：event.preventDefault();就在click事件之后，在执行我的jquery .show（）方法之前。

 $("#playbuttonahref").click(function() {
        event.preventDefault();
    $("#hiddenvideocontainer").show('slide', { direction: "left" }, 500);
    });

jQuery驱动的显示/隐藏链接导致页面滚动

2 个答案: