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

Question

我在静态站点上使用 Bootstrap 5（Beta 3 - 否 JQuery），我需要激活导航栏 link。我想在 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')

Demo

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

How to make Bootstrap 5.0 (beta 3) navbar link active with JS

javascript

bootstrap-5