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>