我只是想执行一个非常简单的jQuery操作。

我有两个组件:#safety#safety-tab a#safety需要在加载时隐藏。单击#safety-tab中的链接时,它将本身为hide并为slideUp进行#safety

这种工作方式,但#safety框仅在单击时闪烁,不会一直显示:

 $(document).ready(function() {
   $("#safety-tab a").click(function() {
     $(this).hide();
     $("#safety").removeClass("hide");
   });
   });

虽然标记是这样的:
     <div id="safety" class="hide group">
      ...
     </div><!--end #safety-->
    <div id="safety-tab">
      <a href="">...</a>
    </div><!--end #safety-tab-->

知道我在做什么错吗?

最佳答案

return false;event.preventDefault()添加到您的点击处理程序。

$(document).ready(function() {
   $("#safety-tab a").click(function( event ) {
     $(this).hide();
     $("#safety").removeClass("hide");
     event.preventDefault();
   });
});

这样可以防止<a>元素的默认行为,该行为正在重新加载页面。
  • http://api.jquery.com/event.preventDefault

  • 使用event.preventDefault()可以保留有时需要的事件冒泡。

    进行return false;将阻止默认行为,但也将阻止冒泡。

    10-02 16:34