单击一组锚元素时切换图像

Question

我需要隐藏和显示一些图像取决于用户点击的地方。.img-active类表示默认显示的图像，.img-inactive类表示隐藏的图像。当您单击锚时，这些图像必须交换(显示其中一个，隐藏另一个)。显然，如果单击另一个锚，则必须再次将单击的最后一个锚设置为默认状态。

但是我现在有一个问题，这个功能只在每个锚上的第一次点击时起作用。当你第二次尝试时，你会发现它坏了。

在视频中，你会看到每个圆圈都有一个边框，在你第二次点击后，我这样做只是为了区分if条件。

我录了这段视频！

这就是你可以在视频中看到的html：

    <a class="fig-8" data-tab="tab1">
        <img src="path/researchicon-x.png" alt="" class="pulse img-active">
        <img src="path/selected-x.png" alt="" class="img-inactive">
    </a>

    <a class="fig-8" data-tab="tab2">
        <img src="path/WideRange.png" alt="" class="pulse img-active">
        <img src="path/selected-x.png" alt="" class="img-inactive">
    </a>

    <a class="fig-8" data-tab="tab3">
        <img src="path/SSI_toolbox.png" alt="" class="pulse img-active">
        <img src="path/selected-x.png" alt="" class="img-inactive">
    </a>

    <a class="fig-8" data-tab="tab4">
        <img src="path/PricingIcon.png" alt="" class="pulse img-active">
        <img src="path/selected-x.png" alt="" class="img-inactive">
    </a>

以下是JS函数：

var iconTabs = function () {
    $('.tabs1 a').on('click', function() {
        var $tabContainer = $(this).parents('.tab-container');
        var tabId = $(this).data('tab');
        $tabContainer.find('.icons-tabs a').addClass('inactive');
        $(this).removeClass('inactive');


        // that functionality begins here!!!
        $('.tabs1 a').not(this).find('.img-inactive').hide();
        $('.tabs1 a').not(this).find('.img-active').show();

        var active;
        if ($(this).hasClass('selected-shown')) {
            active = '.img-inactive';
            $(this).find('.img-active').css('border', '5px solid green');
        } else {
            active = '.img-active';
            $(this).find('.img-active').show();
            $(this).find('.img-active').css('border', '4px solid red');
        }

        var show;
        if ($(this).hasClass('selected-shown')) {
            show = '.img-active';
            $(this).find(show).css('border', '3px solid blue');
        } else {
            show = '.img-inactive';
            $(this).removeClass('selected-shown');
            $(this).find('.img-active').css('border', '6px solid orange');
        }

        $(this).addClass('selected-shown').find(show).show();
        $(this).find(active).hide();

    });
};

.selected-shown只是我要添加到父元素中的一个标志，以检查我单击的锚点。

有什么建议吗？

Answer 1

   Try this one.



<div id="gallery">
    <div class="main">
        <div class="big show"><!-- image / video here --></div>
        <div class="big"><!-- image / video here --></div>
        <div class="big"><!-- image / video here --></div>
    </div>

    <div class="thumbnails">
        <a href="#"><img src="images/thumb1.jpg" alt="#"/></a>
        <a href="#"><img src="images/thumb1.jpg" alt="#"/></a>
        <a href="#"><img src="images/thumb1.jpg" alt="#"/></a>
    </div>

    $('.thumbnails a').on('click',function(){
       var eq = $(this).index();

       $('.main .big').removeClass('show');
       $('.main .big').eq(eq).addClass('show');
    });