我在网站上有一个侧面导航栏。我已经制作了css和所有内容,问题是,当我单击导航栏上的元素以切换标签时,它并不总是那样,它是随机的,有时元素会重定向到标签,有时不重定向到标签,然后单击全部,他们只是停止工作,将none重定向到他们应该重定向的选项卡,他们获得了活动类,我真的不知道代码有什么问题
$('.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>