html навигационная панель не переключается на другие вкладки

Question

У меня есть боковая панель навигации на сайте. Я сделал css и все, проблема в том, что когда я щелкаю по элементу панели навигации для переключения вкладок, он просто делает это не всегда, это случайно, иногда элемент перенаправляет на вкладку, а иногда нет, затем, когда щелкнули все, они просто перестают работать и не перенаправляют на вкладку, которую они должны перенаправить, они получают активный класс, я действительно не знаю, что не так в коде

$('.sideNavBarItem').on('click', function() {
  $('.sideNavBarItem').removeClass('navActive');
  $(this).addClass('navActive');
});

#sideNavBar {
  top: 0;
  left: 0;
}

#sideNavBar li {
  border: none;
  background-color: transparent;
  list-style-type: none;
}

#sideNavBar li.navActive {
  border-left: 4px solid #B6000E;
  background-color: #EEEEEE;
  list-style-type: none;
}

#sideNavBar li:hover {
  border-left: 4px solid #B6000E;
  background-color: #EEEEEE;
  list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul style="overflow-y :hidden; margin-left:-40px" id="sideNavBar">

  <li id="Overview" style="height:35px;" class="sideNavBarItem navActive">
    <a data-toggle="tab" href="#fillingAndDetails" style="color:rgb(51,51,51)">
      <i class="fas fa-building"></i>
      <span>Overview</span>
    </a>
  </li>

  <li id="instantAnalysis" class="sideNavBarItem">
    <a data-toggle="tab" href="#instantAnalysis" style="color:rgb(51,51,51)">
      <i class="fas fa-chart-line"></i>
      <span>Instant Analysis</span>
    </a>
  </li>

  <li class="sideNavBarItem">
    <a data-toggle="tab" href="#insiderData" style="color:rgb(51,51,51)">
      <i class="fas fa-percentage"></i>
      <span>Insider Data</span>
    </a>
  </li>

  <li class="sideNavBarItem">
    <a data-toggle="tab" href="#advancedCharts" style="color:rgb(51,51,51)">
      <i class="fas fa-chart-area"></i>
      <span>Advanced Chart</span>
    </a>
  </li>

  <li class="sideNavBarItem">
    <a data-toggle="tab" href="#redFlags" style="color:rgb(51,51,51)">
      <i class="fas fa-file-alt"></i>
      <span>Red Flags</span>
    </a>
  </li>

  <li class="sideNavBarItem">
    <a data-toggle="tab" href="#companyTimeLine" style="color:rgb(51,51,51)">
      <i class="fas fa-stream"></i>
      <span>Company Timeline</span>
    </a>
  </li>
</ul>