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类中删除“active”，然后将.active添加到select元素。问题是从所有div中删除类。我在切换卡之间有动画。例如，这会产生这种情况。我在卡片3上并点击了卡片4然后我看到卡片一（因为这是在没有.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

卡片之间切换CSS + jQuery

1 个答案: