这是使用 bootstrap 将活动 class 添加到导航栏的最有效方法吗 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 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');
  }
});

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

Is this the most efficient way to add active class to navbar with bootstrap 4

navigation

class

bootstrap-4