根据每个页面的URL添加活动类

Question

我试图基于页面加载后所在页面的适当菜单列表项添加“活动”类（即class="active" ）。
下面是我目前的菜单（适用于移动设备和台式机）。 我已经尝试了在这方面可以找到的所有代码片段，但是没有任何效果。
因此，有人可以简单解释一下在何处以及如何在JavaScript中添加以定义此任务吗？

 nav ul li.active a:after { content: ''; background: url("../img/header-active.png") no-repeat; width: 14px; height: 7px; top: 24px; right: 0px; left: 0px; margin: 0 auto; position: absolute; display: block; } 

 <!-- Main menu --> <nav class="desktop"> <ul> <li><a href="/">home</a></li> <li class="active"><a href="our-authors.html">our authors</a></li> <li><a href="our-books.html">our books</a></li> <li><a href="publish-with-us.html">publish with us</a></li> <li><a href="careers.html">careers</a></li> <li><a href="contact.html">contact</a></li> </ul> </nav> <!-- Main menu --> <!-- Mobile menu --> <div id="mobile-menu" class="mobile"> <div class="mob-menu" onclick="menuChange(this)"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div> <ul> <li><a href="/">home</a></li> <li class="active"><a href="our-authors.html">our authors</a></li> <li><a href="our-books.html">our books</a></li> <li><a href="publish-with-us.html">publish with us</a></li> <li><a href="careers.html">careers</a></li> <li><a href="contact.html">contact</a></li> <li><a href="bestseller_engine.html">The TreeShade Bestseller Engine</a></li> </ul> </div> <!-- Mobile menu --> 

Answer 1

使用location.pathname 。

var path = location.pathname.replace("/", "");
var anchor = document.querySelector("a[href='" + path + "']");

anchor.parentNode.classList.add("active")

我不知道为什么要这样做，最好是在服务器上动态进行