Bootstrap 4-突出顯示活動的nav-item / nav-link

Question

我在Bootstrap 4中有一個簡單的導航欄。我似乎無法獲取我的jQuery代碼，甚至無法將“活動”（類）添加到我單擊的nav-link類中。

 <script> $(document).ready(function () { $('.nav-link').click(function() { $('.nav-item').removeClass('active'); $(this).addClass('active'); console.log("Clicked..."); }); }); </script> 

  <nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark"> <a class="navbar-brand" href="/">MySite</a> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="/menu1">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" href="/menu2">Menu 2</a> </li> </ul> </div> </nav> 

我認為，該代碼將在click事件上處於活動狀態，並刪除當前找到的所有活動類，並添加到當前的nav-link類中。

任何人都可以幫助並解釋上面的代碼為什么突出顯示元素但又丟失了它嗎？ 是因為首先發生單擊，然后重新加載頁面，所以所有DOM更改都丟失了嗎？

Answer 1

由於我使用的是Go語言，因此我必須將一個變量傳遞給模板，例如，如果Title與我正在渲染的頁面匹配，則將“ Title”並在類中添加“ active”，renderTemplate是使用RiceBox（僅供參考）的自定義函數。 我希望這可以幫助別人：

func HomeHandler(w http.ResponseWriter, r *http.Request) {
  varMap := map[string]interface{}{
    "Title": "Home",
  }

  renderTemplate(w, "templates/index.html", &varMap)
}

HTML /模板（例如，在index.html中加載的header.html：

<nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="/">My Site</a>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link {{ if eq .Title "Home" }}active{{ else }}{{ end }}" href="/">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link {{ if eq .Title "Help" }}active{{ else }}{{ end }}" href="/help">Help</a>
        </li>
      </ul>
    </div>
</nav>