“如何使用 JavaScript 来检测哪个页面打开，以便为正确的元素分配一个类？

Question

我正在创建侧边菜单，我正在尝试创建 javascript，检测我所在的页面，并将活动类添加到右侧元素。

我有这个html：

<div>
  <ul>
    <li> <a href="link1.html" className="menuLink"> Page 1 </a></li>
    <li> <a href="link2.html" className="menuLink"> Page 2 </a></li>
    <li> <a href="link3.html" className="menuLink"> Page 3 </a></li>
  </ul>
</div>

ChatGpt sugestset 这个 javascipt 代码：

const currentPath = window.location.pathname;

document.querySelectorAll('.menuLink').forEach((link) => {
    
    if (link.getAttribute('href') === currentPath) {
        link.classList.add('active'); 
    }
});

遗憾的是它不起作用。有什么建议吗？谢谢。

Answer 1

CHatGPT 由于一个小原因是不正确的。

window.location.pathname

返回当前文件的路径，并带有前导斜杠

/

。但是，锚点的 href 没有前导斜杠。因此，您需要将它们添加到 href 才能正常工作：

const currentPath = window.location.pathname;

document.querySelectorAll('.menuLink').forEach((link) => {
  link.classList.toggle('active', (link.getAttribute('href') === currentPath)); 
});

<div>
  <ul>
    <li> <a href="/link1.html" className="menuLink"> Page 1 </a></li>
    <li> <a href="/link2.html" className="menuLink"> Page 2 </a></li>
    <li> <a href="/link3.html" className="menuLink"> Page 3 </a></li>
  </ul>
</div>

您可以根据条件使用

classList.toggle()

添加班级。所以你不需要

if

声明。