使用兩個可用的 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部分；我不知道它是如何工作的。）