在卡片之间切换 CSS+jQuery

Question

我制作了一个页面，上面有一张卡片，下一张。我在将 class 添加到活动卡时遇到问题，看：

<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 class "active" 中删除，然后将 .active 添加到 select 元素。问题是从所有 div 中删除 class。我在切换卡之间有动画。例如，这会导致情况。我在卡片 3 上，首先点击卡片 4 我看到卡片一（因为这是在没有 .active 的顶部），然后看到点击的卡片。有人可以帮我解决这个麻烦吗？

编辑：这里是一个 jsfiddle：https://jsfiddle.net/2z2v7wz6/

Answer 1

试试这个：

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

Answer 2

尝试更改上一层的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.

在卡片之间切换 CSS+jQuery

Switch between cards CSS+jQuery

css

jquery

position