Изменить изображение на активное состояние другого 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>

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');
});