jQuery addClass example

Change class name on click in jQuery

by Dmitri Ganenco

HTML

<section class="">
  <div class="container">
    <div class="products-category-list">
      <div class="a-tab">
        <ul class="tab_click">
          <li class="tab-link current" data-tab="tab-1">Product1 Details</li>
          <li class="tab-link" data-tab="tab-2">Product2 Details</li>
          <li class="tab-link" data-tab="tab-3">Product3 Details</li>
          <li class="tab-link" data-tab="tab-4">Product4 Details</li>
        </ul>
      </div>

      <div id="tab-1" class="tab-content current">
        <div class="display_table">
          <p>
            <?php echo $productdetails1 ?>
          </p>
        </div>
      </div>
      <div id="tab-2" class="tab-content">
        <div class="display_table">
          <p>
            <?php echo $productdetails2 ?>
          </p>
        </div>
      </div>
      <div id="tab-3" class="tab-content">
        <div class="display_table">
          <p>
            <?php echo $productdetails3 ?>
          </p>
        </div>
      </div>
      <div id="tab-4" class="tab-content">
        <div class="display_table">
          <p>
            <?php echo $productdetails4 ?>
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

JavaScript

$('ul.tab_click li').click(function() {
debugger;
  var tab_id = $(this).attr('data-tab');
  $(this).closest('ul.tab_click').find('li').removeClass('current');
  $('.tab-content').removeClass('current');
  $(this).addClass('current');
  $("#" + tab_id).addClass('current');
})