Добавить активный класс на основе 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")

Я не знаю, почему вы хотите сделать это так, лучше всего делать это на сервере динамически