活動類的引導標籤動態

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>