活动类的引导标签动态

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>