Question

我需要隐藏并显示一些图片，具体取决于用户点击的位置。 .img-active类表示默认显示的图像，.img-inactive类表示隐藏图像。当您单击锚点时，这些图像必须交换（显示一个并隐藏另一个）。显然，如果你点击另一个锚点，你点击的最后一个锚点必须再次设置为默认状态。

但我现在遇到一个问题，该功能仅适用于每次锚点的第一次点击。第二次尝试时，你会看到它坏了。

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

I have recorded this video!

这是您在视频中看到的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

试试这个，请在代码中阅读评论

查看行动中的代码

＆＃13;

$('.tabs1 a').on('click', function() {
    var ThisIt = $(this),                              // this
        All_a_but_this = $('.tabs1 a').not($(this)),   // all <a> tags but this
        Active = $(this).find('img.img-active').is(':visible'), // return true if the img with img-active class is visible
        Inactive = $(this).find('img.img-inactive').is(':visible'); // return true if the img with img-inactive class is visible
    // return all <a> but this to default
    All_a_but_this.each(function(){     // loop through other <a>
        $(this).removeClass('selected-shown');    // remove selected-shown
        $(this).find('img.img-active').show();    // show active image
        $(this).find('img.img-inactive').hide();  // hide inactive image
    });
    // swap
    if(Active === true){   // if active image is visible
      $(this).find('img.img-active').hide();     // hide active image
      $(this).find('img.img-inactive').show();   // show inactive image
    }
    if(Inactive === true){  // if inactive image is visible
      $(this).find('img.img-active').show();    // show active image
      $(this).find('img.img-inactive').hide();   // hide active image
    }

    $(this).toggleClass('selected-shown');  // toggle selected-shown class
}).filter('.selected-shown').click();

＆＃13;

.img-active{
  display: block;
}
.img-inactive{
  display : none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs1">
  <a class="fig-8" data-tab="tab1">
      <img src="http://via.placeholder.com/140x100" alt="" class="pulse img-active">
      <img src="http://via.placeholder.com/200x150" alt="" class="img-inactive">
  </a>

  <a class="fig-8" data-tab="tab2">
      <img src="http://via.placeholder.com/140x100" alt="" class="pulse img-active">
      <img src="http://via.placeholder.com/200x150" alt="" class="img-inactive">
  </a>

  <a class="fig-8" data-tab="tab3">
      <img src="http://via.placeholder.com/140x100" alt="" class="pulse img-active">
      <img src="http://via.placeholder.com/200x150" alt="" class="img-inactive">
  </a>

  <a class="fig-8 selected-shown" data-tab="tab4">
      <img src="http://via.placeholder.com/140x100" alt="" class="pulse img-active">
      <img src="http://via.placeholder.com/200x150" alt="" class="img-inactive">
  </a>
</div>

＆＃13;

Answer 2

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

单击一组锚元素

2 个答案: