Javascript 引导4-突出显示活动导航项目/导航链接

我在Bootstrap4中有一个简单的导航栏。我似乎无法获取jQuery代码，甚至无法向我单击的导航链接类添加“活动”（类）

$（文档）.ready（函数（）{
$（'.nav link'）。单击（函数（）{
$（'.nav item'）.removeClass（'active'）；
$（this.addClass（'active'）；
日志（“单击…”）；
});
});

因为我使用的是Go，所以我必须向模板传递一个变量，比如“Title”并向类中添加“active”。如果Title与我正在呈现的页面匹配，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>

这是因为单击首先发生，然后页面被重新加载，因此任何DOM更改都会丢失吗？

是的。您得到了。另外，您的jQ代码正在从

.nav项

中删除

活动的

类（例如li元素），但将其添加到

$（此）

，这是使用

.nav链接

选择器的（例如anchor元素）。我的想法是错误的。这应该在服务器端完成，或者在我的情况下，Go.Yup。你知道了。谢谢，为了其他人的利益，我已经添加了“回答”这个问题。我想我不应该在周一编写代码。：）