在另一个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');
});