Bootstrap 4 - 突出显示活动的导航项/导航链接答案

【问题标题】：Bootstrap 4 - Highlight active nav-item/nav-linkBootstrap 4 - 突出显示活动的导航项/导航链接
【发布时间】：2018-04-10 05:26:07
【问题描述】：

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

<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 更改都丢失了吗？

【问题讨论】：

Is it because click occurs first, and then the page gets reloaded so any DOM changes are lost? 是的。你明白了。
此外，您的 jQ 代码正在从 .nav-item 中删除 active 类（例如 li 元素），但将其添加到使用 .nav-link 选择器的 $(this) 中（例如锚元素）。
我想错了。这应该在服务器端完成，或者在我的情况下，Go。
是的。你明白了。
谢谢，为了其他人的利益，我已经添加了“回答”这个问题。我想我不应该在星期一编码。 :)

标签： javascript jquery bootstrap-4

【解决方案1】：

由于我使用 Go，我必须将一个变量传递给模板，比如“标题”，如果标题与我正在渲染的页面匹配，则将“活动”添加到类中，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>

【讨论】：