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删除$('.active').removeClass('active');课程，然后更改addClass()添加$this.parent().addClass('active');（这会将活动课程添加到当前的父级clicked元素，在这种情况下是带有thumbnail类的元素。试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: