javascript - 在另一个 div 的活动状态下更改图像

Question

对此的任何帮助将不胜感激。我的目标是创建选项卡来更改其选择的图像。我能够创建活动选项卡功能，但我不确定如何更改图像。

基本上我正在寻找的是，如果#one 处于活动状态，那么#image-one 应该显示，反之亦然。两个图像不应同时显示。

$(document).ready(function() {

  $('.intro-tabs').on('click', function() {
    $('.intro-tabs.learn-more').removeClass('learn-more');
    $(this).addClass('learn-more');
  });

});

.intro-tabs {
  width: 80%;
  margin: 10px 0;
  transition: width 1s;
  position: relative;
  border: 1px solid black;
}
.intro-tab-content {
  max-width: 290px;
  width: 100%;
}

p {
  display: none;
}

.learn-more {
  width: 100%;
}

.learn-more p {
  display: block !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid-container show-for-medium">
  <div class="grid-x grid-padding-x" style="position: relative;">
    <div class="medium-7 cell intro-tabs-text">
      <div id="one" class="intro-tabs learn-more">
        <div class="intro-tab-content">
          <h6>one</h6>
          <p>lorem ipsum dolor lorem ipsum dolor.</p>
        </div>
      </div>
      <div id="two" class="intro-tabs">
        <div class="intro-tab-content">
          <h6>two</h6>
          <p>lorem ipsum dolor lorem ipsum dolor.</p>
        </div>
      </div>
    </div>

    <div class="medium-7 large-6 cell text-right intro-tabs-img">
      <img id="image-one" src="https://cdn.pixabay.com/photo/2017/03/29/15/16/ilight-2185506_1280.jpg">
      <img id="image-two" src="https://cdn.pixabay.com/photo/2013/07/19/00/18/splashing-165192_1280.jpg">
    </div>
  </div>
</div>

标签： javascriptjqueryhtmlcsstabs

Answer 1

您可以使用data属性来实现：

HTML 编辑：

<div id="one" class="intro-tabs learn-more" data-target="#image-one">

JS编辑：

$('.intro-tabs').on('click', function() {
    $('.intro-tabs.learn-more').removeClass('learn-more');
    $(this).addClass('learn-more');

    var target = $(this).data('target');

    $('.intro-tabs-img img').removeClass('yourActiveClass');
    $(target).addClass('yourActiveClass');
});