javascript - 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>

标签： javascripthtmlcss