[英]Bootstrap navigation bar active state
Since there is a page load when clicking on a navigation bar item, I cannot just use 由于在单击导航栏项目时存在页面加载,因此我不能仅使用
$(".nav a").on("click", function(){ $(".nav").find(".active").removeClass("active"); $(this).parent().addClass("active"); });
Please provide me a better solution. 请为我提供更好的解决方案。
When the page is loaded you have to check if the links of the anchors match with the page location. 页面加载后,您必须检查锚点的链接是否与页面位置匹配。
$(".nav a").each(function() {
if(document.location.href.indexOf(this.href)>=0) {
$(this).parent().addClass("active");
}
});
As a solution for my issue, I followed the following way. 为了解决我的问题,我遵循以下方式。
I added HTML IDs for each of my navigation bar items. 我为每个导航栏项目添加了HTML ID。 Then in each page related to each navigation bar item, I added Bootstrap active class using javascript as follows. 然后,在与每个导航栏项目相关的每个页面中,我使用javascript添加了Bootstrap活动类,如下所示。
$("#ID_of_the_navi_bar_item").addClass('active'); $(“#ID_of_the_navi_bar_item”)。addClass('active');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.