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

Question

I cant seem to get the active class to change to the corresponding item selected (see code bellow)

So I would like the active class to change depending on the thumbnail selected.

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

Try using the following jQuery code:

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

jsfiddle link: https://jsfiddle.net/nashcheez/m1mbp9ke/

Answer 2

Try removing the active class first using $('.active').removeClass('active'); and change the addClass() to be added like this $this.parent().addClass('active'); (this will add the active class to the parent of the current clicked element, in this case the element with thumbnail class). Try this:

 $('#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>