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

【问题标题】：Add Active Class Based on URL of the every page根据每个页面的 URL 添加活动类
【发布时间】：2019-07-09 06:47:34
【问题描述】：

我正在尝试根据页面加载后所在的页面将“活动”类（即class="active"）添加到相应的菜单列表项。
以下是我现在的菜单（用于移动和桌面）。我已经尝试了在这方面我能找到的每一个 sn-p 代码，但没有任何效果。
那么，谁能解释一下在哪里以及如何添加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 -->

【问题讨论】：

你试过什么？
stackoverflow.com/questions/20060467/… 的副本。应该可以在那里找到答案。
您不应该尝试在服务器端渲染期间添加类名。

标签： javascript css html

【解决方案1】：

使用location.pathname。

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

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

不知道你为什么要这样，最好在服务器中动态的做

【讨论】：