这是使用引导程序 4 将活动类添加到导航栏的最有效方法吗答案

【问题标题】：Is this the most efficient way to add active class to navbar with bootstrap 4这是使用引导程序 4 将活动类添加到导航栏的最有效方法吗
【发布时间】：2021-03-15 00:11:47
【问题描述】：

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

有更好的方法吗？

【问题讨论】：

你不需要检查
是否有活动的类——只需删除它（如果类不存在，classList 不存在 error）。您可以将active 从源文件中删除，而无需将其删除。通常，活动页面是通过PHP等在服务器上设置的。即使只有静态页面，通常活动页面也预设在每个静态文件中。您应该删除 <span class="sr-only">(current) 并将其添加到锚点 HTML。

【解决方案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 filter :contains for a link (a href="#") https://api.jquery.com/filter/ https://api.jquery.com/children/#children-selector

更容易理解：

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

【讨论】：

不应该 $('nav li.active a[href="'+page+'"]')).addClass('active');是 $('nav li a[href="'+page+'"]')).addClass('active'); ???