jQuery显示/隐藏问题 [英] jQuery Show/Hide Question

问题描述

我只是想尝试一个非常简单的jQuery动作。

I'm just trying to preform a very simple jQuery action.

我有两个组件： #safety 和＃safety-tab a ， #safety 需要在加载时隐藏。当点击＃safety-tab 中的链接时，它将隐藏本身和 slideUp #safety 。

I have two components: #safety and #safety-tab a, the #safety needs to be hidden on load. When the a link in the #safety-tab is clicked, it will hide itself and slideUp the #safety.

这种作品，但 #safety 框只是点击闪烁，不会显示：

This sort of works, but the #safety box just flickers on click, doesn't stay shown:

 $(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-->

我知道我做错了吗？

推荐答案

添加返回false; 或 event.preventDefault（） to你的点击处理程序。

Add return false; or event.preventDefault() to your click handler.

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

这可以防止< a> 元素，它正在重新加载页面。

This prevents the default behavior of the <a> element, which is reloading the page.

• http://api.jquery.com/event.preventDefault

• http://api.jquery.com/event.preventDefault

使用 event.preventDefault（）将保留有时需要的事件冒泡。

Using event.preventDefault() will preserve event bubbling which is sometimes needed.

执行返回false ; 将阻止默认行为，但它也会停止冒泡。

Doing return false; will prevent the default behavior, but it will also halt the bubbling.

这篇关于jQuery显示/隐藏问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！