javascript - jQuery 卡切换事件类

Question

我目前正在开发的网站在这里( map 部分): http://vtx.canny-creative.com/

我目前面临两个问题:

1. “active”类添加到左侧的 .location-card 中。但我还需要右侧相应的 .dot 来添加“事件”。我能做到。然而...

2. 我不能做的是让“第一个加载/可见”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 fiddle 创建了一些东西: https://jsfiddle.net/harishkommuri/xc8ebuf4/

Answer 1

我正式回答这个问题主要是因为我无法忍受未回答的问题，不过，这可能对那些休息日或刚刚开始的人有所帮助。

您只需将 HTML 中的 active 类添加到页面加载时应具有该类的元素即可:

<div id="card1" class="location-tile card active">

另一个选择是在事件处理程序之前或之后添加带有 jQ​​uery 的 active 类:

$('#card1').addClass('active');