使用两个可用的 href 更改活动导航栏链接的颜色

Question

当我有 '/' 和 '/start' href 时，我可以在 START 页面上显示 go。 但是我的 JS function，它改变了我的活动链接颜色只适用于“/开始”链接，但是当它是“/”时，我打开了我的页面，但我在导航栏上的链接没有颜色。 我应该怎么办？ html 中的两个链接？ 还是换我的JS function？

js:

function markActiveMenuItem() {
  var path = window.location.pathname;
  if (path != "/building" && !path.startsWith("/watch")) {
    $(".nav-link").each(function () {
      var href = $(this).attr("href");
      if (path.substring(0, href.length) === href) {
        $(this).addClass("active");
      }
    });
    $(".dropdown-item").each(function () {
      var href = $(this).attr("href");
      if (path.substring(0, href.length) === href) {
        $(this).closest(".nav-item").children("a").addClass("active");
      }
    });
  }
}

html：

    <li class="nav-item">
            <a class="nav-link" href="/start"> START </a>
        </li>

@配置class

  @GetMapping({"/", "/start"})
public String home(Model model) {
    return "templates/home";
}

Answer 1

你有一个 href 为/的链接吗？

路径应该是/ （根据您的问题），并且您正在将其与每个导航链接的 href 进行比较

$(".nav-link").each(function () {
    var href = $(this).attr("href");

在这里，大概路径是/

(path.substring(0, href.length) === href)

如果您没有将/作为 href 的导航链接，您将永远无法匹配。

您的问题中没有足够的信息可以知道。 （除非它在@GetMapping部分；我不知道它是如何工作的。）