Toggle styling on Bootstrap 4 nav-tabs

Question

I've been trying to style nav-tabs so that the current tab always has a different appearance when selected. I set up this minimal file for testing. When a tab is clicked, the content changes correctly, but I cannot figure out how to apply CSS styles to the currently selected tab.

Am I doing anything wrong in the file? And is there an easy way to accomplish the styling (like changing background color of the active tab) given the current resources called by this document? My goal is to keep the project footprint as small as possible without using any additional javascript.

<div class="container">
  <ul class="nav nav-tabs nav-justified">
    <li class="nav-item active">
      <a href="#first10" data-toggle="tab">First</a>
    </li>
    <li class="nav-item">
      <a href="#second10" data-toggle="tab">Second</a>
    </li>
  </ul>
  <div class="tab-content">
    <div id="first10" class="tab-pane active">
      <h2>First</h2>
    </div>
    <div id="second10" class="tab-pane">
      <h2>Second</h2>
    </div>
  </div>
</div>


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Answer 1

It turned out that default Bootstrap 4 provided a way to do exactly what I wanted. This is the final version of the original post.

• Removed "active" from <li> element
• Added "nav-item" class to <li> anchors
• Added "active" class to first <li> anchor
• Added "fade" and "show" classes to first "tab-pane" <div>
• Added "fade" class to second "tab-pane" <div>

The two usages of the "fade" class were not strictly required but added a subtle effect.

<div class="container">
  <ul class="nav nav-tabs nav-justified">
    <li class="nav-item">
      <a class="nav-link active" href="#first10" data-toggle="tab">First</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#second10" data-toggle="tab">Second</a>
    </li>
  </ul>
  <div class="tab-content">
    <div id="first10" class="tab-pane fade show active">
      <h2>First</h2>
    </div>
    <div id="second10" class="tab-pane fade">
      <h2>Second</h2>
    </div>
  </div>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Answer 2

Add a class that has your preferred styling on a click event on the tab.

Give your tab's specific ID's so like #Tab1 and #Tab2

Try:

$('#Tab1').on('click', function () {
   $('#Tab1').addClass('active');
   $('#Tab2').removeClass('active');
});

Then do the opposite for the second tab.

$('#Tab2').on('click', function () {
   $('#Tab2').addClass('active');
   $('#Tab1').removeClass('active');
});