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