Активный класс динамика в закладках бутстраповских

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'); (это добавит активный класс к родителю текущего щелкнутого элемента, в этом случае элемент с 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>