カード間の切り替えCSS + jQuery

Question

私は次のカードの下に1枚のカードでページを作りました。

<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クラスから「アクティブ」削除した後、要素を選択し.active追加：私は、アクティブカードにクラスを追加することで問題、顔をしています。問題は、すべてのdivからクラスを削除することです。 私はカードを切り替える間にアニメーションを持っています。 これは、例えば、私はカード3にいて、カード4を最初にクリックしました。カード1が表示されます（これはアクティブではないためトップに表示されています）。その後、クリックされたカードが表示されます。 誰かがその問題を解決するのを助けることができますか？

編集：ここでは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"); 
});