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;将阻止默认行为,但它也将停止冒泡.