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