Class 这是使用bootstrap 4将活动类添加到navbar的最有效方法吗

下面是我正在使用的简短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");
        }
    }
});

var locations=['index'，'about'，'blog'，'contact'，'services']
var navLinks=document.querySelectorAll（'nav li'）；
var wlp=window.location.pathname；
位置。forEach（（第页）=>{
若有（总包含（第页））{
for（设i=0；i

有更好的方法吗？

使用

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

所以你不需要测试它

但更聪明的是使用JQuery（因为bs4，您已经加载了它）

看

更容易理解：

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

---

您不需要检查a

是否有活动类，只需删除它（如果类不存在，则不存在）。您只需将

处于活动状态

从源文件中移出即可，无需将其删除。通常，活动页面通过PHP等在服务器上设置。即使只有静态页面，通常活动页面也会预设到每个静态文件中。您应该删除并将

（当前）

添加到锚HTML中。不应该$（'nav li.active a[href=“'+page+'”）.addClass（'active'）；be$（'nav li a[href=“”+页面+“]”]）.addClass（'active'）？？？是的，你说得对。我会在上面更正它

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