What are the manual methods to set the CSS classes 'in' and 'active' for tabs in Bootstrap?

To set the CSS classes 'in' and 'active' for tabs in Bootstrap manually, you can use JavaScript or jQuery to add and remove these classes based on user interaction. By adding the 'in' class to the active tab content and the 'active' class to the active tab header, you can style the tabs accordingly. 

<!-- HTML -->
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
  <li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
</ul>

<div class="tab-content">
  <div id="tab1" class="tab-pane fade in active">
    Tab 1 content
  </div>
  <div id="tab2" class="tab-pane fade">
    Tab 2 content
  </div>
</div>

<!-- JavaScript/jQuery -->
<script>
$(document).ready(function(){
  $('.nav-tabs a').on('click', function(){
    $('.nav-tabs li').removeClass('active');
    $(this).parent('li').addClass('active');

    var target = $(this).attr('href');
    $('.tab-pane').removeClass('in active');
    $(target).addClass('in active');
  });
});
</script>

Keywords

PHP Bootstrap CSS tabs manual methods

Related Questions