这是用bootstrap 4将活动类添加到导航栏的最有效方法吗

Question

这是我正在使用的简短的小js脚本：

var locations = ['index', 'about', 'blog', 'contact', 'services']
var navLinks = document.querySelectorAll('nav li');
var wlp = window.location.pathname;
locations.forEach((page) => {
if (wlp.includes(page)) {
for (let i = 0; i < navLinks.length; i++) {
if (navLinks[i].classList.contains("active")) {
navLinks[i].classList.remove("active");
}
let href = navLinks[i].getElementsByTagName('a')[0].href;
if (href.includes(page)) navLinks[i].classList.add("active");
}
}
});

有更好的方法吗？

Answer 1

使用

var navLinks = document.querySelectorAll('nav li.active');

所以，你不需要测试它

但这里更聪明的是使用JQuery(由于bs4，您已经加载了它(

locations.forEach((page) => { 
if (wlp.includes(page)) {
$('nav li')
.removeClass('active')
.children().filter(('a[href="'+page+'"]')).addClass('active');
}
});

请参阅jQuery筛选器：包含链接(a href="#&quothttps://api.jquery.com/filter/https://api.jquery.com/children/#children-选择器

更易于理解：

locations.forEach((page) => { 
if (wlp.includes(page)) {
$('nav li.active').removeClass('active'):
$('nav li a[href="'+page+'"]')).addClass('active');
}
});