Question

我目前正在处理的网站（地图部分）： http://vtx.canny-creative.com/

我目前面临两个问题：

'active'类添加到左侧的.location-card。但我还需要在右侧添加相应的.dot以添加“活动”。我能做什么。然而...
我不能做的是获得“首次加载/可见”DIV，“选择点”，以“应用”。因此，活动仅适用于点击，而不是“加载”，然后“点击”，因为我循环使用它们。

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

.where-we-operate .card-container {
  position: relative;
  .card {
    position: absolute;
    top: 0px;
  }
  .active {
    z-index: 4 !important;
    animation: foo 0.5s ease 1;
  }
}

.where-we-operate .map-container {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="where-we-operate">
  <div class="grid-container">
    <div class="grid-x grid-padding-x grid-margin-x">
      <div class="large-6 cell card-container">
        <div id="card1" class="location-tile card">
          Card Info Here
        </div>
        <div id="card2" class="location-tile card">
          Card Info Here
        </div>
        <div id="card3" class="location-tile card">
          Card Info Here
        </div>
      </div>
      <div class="large-6 cell map-container">
        <a href="#card1" class="dot london"></a>
        <a href="#card2" class="dot coventry"></a>
        <a href="#card3" class="dot south-shields"></a>
        <img src="http://localhost:8888/vortex/wp-content/uploads/2018/03/uk-map.jpg" />
      </div>
    </div>
  </div>
</section>

我在这里使用jQuery小提琴创建了一些东西： https://jsfiddle.net/harishkommuri/xc8ebuf4/

Answer 1

我正式回答这个问题主要是因为我无法回答未解决的问题，然后再次对那些在休息日或刚刚开始的人提出帮助。

您只需将HTML中的<div id="card1" class="location-tile card active">类添加到应该在pageload上具有该类的元素：

active

另一种选择是在事件处理程序之前或之后使用jQuery添加$('#card1').addClass('active');类：

null

jQuery卡交换活动类

1 个答案: