如何使用JS激活Bootstrap 5.0(beta 3)导航栏链接

Question

我在一个静态站点上使用Bootstrap 5(Beta 3-没有JQuery(，我需要激活一个导航栏链接。我想在JS中这样做，因为我不想为每个页面都有一个特殊的导航栏。例如，当用户在about.html页面上时，导航栏中的about将切换为活动状态，如：

<li><a class="nav-link active" href="about.html">About</a></li> 

HTML代码段

<nav id="navbar" class="navbar">
<ul>  <!--  "scrollto active" below -->
<li><a class="nav-link" href="index.html">Home</a></li>
<li><a class="nav-link" href="about.html">About</a></li> 
<li><a class="nav-link" href="team.html">Your Team</a></li>
<li><a class="nav-link" href="services.html">Services</a></li>
<li><a class="nav-link" href="#footer">Contact</a></li>
<!-- <li><a class="nav-link" href="#"><strong>Client Login</strong></a></li> -->
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav>

当前JS代码

var filename = window.location.pathname;
// This gives me:  /about.html
var link = filename.substring(1, (filename.length-5));
//This gives me:  about
var x = document.getElementsByTagName('ul')[0];//.getElementsByTagName("li")[0]; //.getElementsByTagName("a")[0]; // .getAttribute("href");
// I tried using the uncommented code with .getElementsByTagName("li").getElementsByTagname(a")[0].getAttribute("href")
// but I just get 5 NULLs (I have 5 links in the navbar)
var lists = x.children;
// This gives me an HTML Collection, right?
for (let i = 1; i < x.childElementCount; i++) {

console.log(lists[i]);
//What I want to do is check what the href text is
//Pseudocode:
//if (the_href_value == link variable) {
//  add " active" to the <a> class
//}
console.log(lists[i].getAttribute("href"));
//this gives me NULL
};

我觉得我已经很接近了，但在用头撞了一下之后，我正式请求帮助。

Answer 1

看起来您可以将其简化为..

var filename = window.location.pathname;
var link = filename.substring(1, (filename.length-5));
let navlink = document.querySelector('[href^='+link+']')
navlink.classList.add('active')

演示