jQuery 显示/隐藏问题

Question

我只是想执行一个非常简单的 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-->

知道我做错了什么吗？

Answer 1

将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; 会阻止默认行为，但也会停止冒泡。

Answer 2

点击链接时尝试返回 false；

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