引导选项卡中的活动类动态

Question

我似乎无法让活动类更改为选定的相应项目（请参见下面的代码）

所以我希望根据所选的thumbnail 更改活动类。

html

 <h2 class="">title</h2>

   <div class="row text-center advice-bar" id="myTab">
        <div class="col-md-3 overlord-thumbnail">
            <div class="thumbnail thumbnail-yellow active">
                <a href="#tab1" data-toggle="tab">
                    <img src="<?php bloginfo('url'); ?>/wp-content/uploads/2017/01/antenna.svg">
                </a>
            </div>
                <h3>one</h3>

                <p>text</p>
        </div>

        <div class="col-md-3 overlord-thumbnail">
            <div class=" thumbnail thumbnail-blue">
                <a href="#tab2" data-toggle="tab">
                    <img src="<?php bloginfo('url'); ?>/wp-content/uploads/2017/01/bar-chart.svg">
                </a>
            </div>
                <h3>two</h3>

                <p>Text</p>
        </div>

        <div class="col-md-3 overlord-thumbnail">
            <div class=" thumbnail thumbnail-red">
                <a href="#tab3" data-toggle="tab">
                    <img src="<?php bloginfo('url'); ?>/wp-content/uploads/2017/01/app.svg">
                </a>
            </div>
                <h3>Three</h3>

                <p>Text</p>
        </div>

        <div class="col-md-3 overlord-thumbnail">
            <div class=" thumbnail thumbnail-green">
                <a href="#tab4" data-toggle="tab">
                    <img src="<?php bloginfo('url'); ?>/wp-content/uploads/2017/01/speech-bubbles.svg">
                </a>
            </div>
                <h3>Foure</h3>

                <p>text</p>
        </div>
    </div>

JavaScript

$('#myTab a').click(function(e) {
    var $this = $(this);
    $this.parent().siblings().removeClass('active').end().addClass('active');
    e.preventDefault();
});

Answer 1

尝试使用以下jQuery 代码：

 $('#myTab a').click(function(e) {
    $($('#myTab a').parent()).addClass("active").not(this.parentNode).removeClass("active");   
    e.preventDefault();
 });

jsfiddle 链接：https://jsfiddle.net/nashcheez/m1mbp9ke/

Answer 2

尝试首先使用$('.active').removeClass('active'); 删除active 类，然后将addClass() 更改为像这样添加$this.parent().addClass('active');（这会将活动类添加到当前单击元素的父级，在本例中为元素thumbnail 类）。试试这个：

$('#myTab  a').on('click', function(e) {
  e.preventDefault();
  var $this = $(this);
  $('.active').removeClass('active');
  $this.parent().addClass('active');
});

img {
  width: 100px;
}
.active {
  border: 1px solid #F00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="">title</h2>

<div class="row text-center advice-bar" id="myTab">
  <div class="col-md-3 overlord-thumbnail">
    <div class="thumbnail thumbnail-yellow active">
      <a href="#tab1" data-toggle="tab">
                    <img src="https://static.pexels.com/photos/1562/italian-landscape-mountains-nature.jpg">
                </a>
    </div>
    <h3>one</h3>

    <p>text</p>
  </div>

  <div class="col-md-3 overlord-thumbnail">
    <div class=" thumbnail thumbnail-blue">
      <a href="#tab2" data-toggle="tab">
                    <img src="https://static.pexels.com/photos/1562/italian-landscape-mountains-nature.jpg">
                </a>
    </div>
    <h3>two</h3>

    <p>Text</p>
  </div>

  <div class="col-md-3 overlord-thumbnail">
    <div class=" thumbnail thumbnail-red">
      <a href="#tab3" data-toggle="tab">
                    <img src="https://static.pexels.com/photos/1562/italian-landscape-mountains-nature.jpg">
                </a>
    </div>
    <h3>Three</h3>

    <p>Text</p>
  </div>

  <div class="col-md-3 overlord-thumbnail">
    <div class=" thumbnail thumbnail-green">
      <a href="#tab4" data-toggle="tab">
                    <img src="https://static.pexels.com/photos/1562/italian-landscape-mountains-nature.jpg">
                </a>
    </div>
    <h3>Foure</h3>

    <p>text</p>
  </div>
</div>