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

Question

I can go on the START page when I have '/' and '/start' hrefs. But my JS function, which change my active link color works only on '/start' link but when it's '/' I have my page opened but my link on navbar isn't colored. What should I do? Two links in html? Or change my 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>

@Configuration class

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

Answer 1

Do you have a link with an href of / ?

The path should be / (per your question), and you're comparing that to every nav-link's href

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

Right here, presumably path is /

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

You'll never get a match if you don't have a nav-link with / as an href.

There's not enough info in your question to know. (Unless it's in the @GetMapping part; I don't know how that works.)