CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptabs
Benjamin Oats
Benjamin Oats

Reputation: 573

Active class dynamic in bootstrap tabs

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();
});

Upvotes: 0

Views: 2130

Answers (2)

nashcheez
nashcheez

Reputation: 5183

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/

Upvotes: 2

Ionut Necula
Ionut Necula

Reputation: 11472

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>

Upvotes: 0

Related Questions