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")

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

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

1 个答案: