Bootstrap "active" tabs don't become active onClick

Question

Very new to HTML and JS combined with Bootstrap. I use the Cyborg-theme and I use the Nav tabs in my HTML-file. The problem that I'm getting is that whenever I click on a tab, I want that tab to become the "active" tab. But that doesn't work, instead the only tab that I set to active in the HMTL is the one tab that stays active.

The tabs changes so I get the right information displayed. It's just this little detail that has me very frustrated. Any ideas?

My HTML:

$(".nav li").on("click", function() {
    $("nav li").removeClass("active");
    $(this).addClass("active");
  });

<script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<ul class="nav nav-tabs">
              <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#about">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#toptracks">Top tracks</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#something">Something</a>
              </li>
            </ul>
            <div id="myTabContent" class="tab-content">
              <div class="tab-pane fade show active" id="about">
                <p>${artist.bio.content}</p>
              </div>
              <div class="tab-pane fade show active" id="toptracks">
                <ul>
                  ${this.tracks.map(track => `<li>${track['name']}</li>`).join('')}
                </ul>
              </div>
              <div class="tab-pane fade show active" id="something">
              <p>Something in here ...</p>
            </div>

Answer 1

Just replace your code inside click event:

$("nav li").removeClass("active");

to:

$(".nav li").removeClass("active");
___^__

as in your HTML code, you have a .nav class and not the nav element and hence the active class is never removed from the initial tab.

Also, add the active class to first li, not to the link inside it in your HTML

Code:

$(".nav li").on("click", function() {
  $(".nav li").removeClass("active");
  $(this).addClass("active");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs">
  <li class="nav-item active">
    <a class="nav-link" data-toggle="tab" href="#about">About</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#toptracks">Top tracks</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#something">Something</a>
  </li>
</ul>
<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade show active" id="about">
    <p>${artist.bio.content}</p>
  </div>
  <div class="tab-pane fade show active" id="toptracks">
    <ul>
      ${this.tracks.map(track => `
      <li>${track['name']}</li>`).join('')}
    </ul>
  </div>
  <div class="tab-pane fade show active" id="something">
    <p>Something in here ...</p>
  </div>

Answer 2

If you are using bootstrap no need for custom js , it automatically add active to the lis

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
	<ul class="nav nav-tabs">
              <li class="nav-item active">
                <a class="nav-link active" data-toggle="tab" href="#about">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#toptracks">Top tracks</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#something">Something</a>
              </li>
            </ul>
            <div id="myTabContent" class="tab-content">
              <div class="tab-pane fade  active in " id="about">
                <p>ghgfhfg</p>
              </div>
              <div class="tab-pane fade" id="toptracks">
                <ul>
                  5555
                </ul>
              </div>
              <div class="tab-pane fade " id="something">
              <p>Something in here ...</p>
            </div>
     </div>  
     </div>