jQuery显示/隐藏问题

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

我有两个组件： #safety和#safety-tab a #safety #safety-tab a ， #safety-tab a需要在加载时隐藏。 单击#safety slideUp #safety-tab的链接时，它将hide自身并slideUp 。

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

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

虽然标记是这样的：

  
 ... 
 
 ... 
 

知道我做错了什么吗？

Answer 1

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

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

这可以防止重新加载页面的元素的默认行为。

• 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; }); });