Question

我在Bootstrap 4中有一个简单的导航栏。我似乎无法获取我的jQuery代码，甚至接近在我点击的nav-link类中添加“active”（类）。

<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>

Bootstrap 4 - 突出显示有效的导航项/导航链接

1 个答案: