在卡片之間切換CSS + jQuery

Question

我用卡片做了一個頁面，下一個。我有添加類爲主動卡的問題，你看：

<div id="card" class="card"></div> 
<div id="card2" class="card"></div> 
<div id="card3" class="card"></div> 
<div id="card4" class="card"></div> 

// css: 
.active{z-index:999} 


// JS: 
$('a').on('click tap', function(e){ 
e.preventDefault(); 
$('.card').removeClass('active'); 
$($(this).attr('href')).addClass('active'); 
}); 

當按鈕被點擊的jQuery首先從所有.card類中刪除「活動」之後添加。主動選擇元素。問題是從所有div中刪除類。 我在切換卡之間有動畫。 這使情況時，例如。我在卡片3上，首先點擊卡片4，我看到卡片1（因爲這是在沒有.active的頂部），然後看到點擊卡片。 有人可以幫我解決那個麻煩嗎？

編輯：下面一個的jsfiddle：https://jsfiddle.net/2z2v7wz6/

Answer 1

嘗試改變前一層的z-index。

JS：

$('a').on('click tap', function(e){ 
    e.preventDefault(); 
    $('.card').css('z-index', '0'); 
    $('.card.active').css('z-index', '3'); 
    $('.card').removeClass('active'); 
    $($(this).attr('href')).addClass('active'); 
}); 

CSS：

.active{ 
    z-index:4 !important; 
    animation:foo 2s ease 1; 
} 

Working Fiddle。

Answer 2

試試這個：

$(".card").click(function() { 
    $(this).toggleClass("active"); 
});