尝试动态更改导航栏中的“活动”类-Node.js / Express / Handlebars

Question

我在单击链接时尝试获取“活动”类集时遇到一个小问题，以便知道我所在的页面。当前发生的情况是，当我单击其他选项卡时，将其设置为“活动”，但是然后在页面加载后消失。

我正在使用Node.js，Express，Handlebar和Bootstrap。 我觉得它必须与class =“ nav-link active”位于<a>标记而不是<li>标记中有关吗？

另请找到有关问题的快速视频：

https://imgur.com/a/xrV8kDv

提前致谢！

layout.handlebars

<div class="container">
  <div  class="header clearfix">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
       <a class="navbar-brand" href="#">Home App</a>
       <ul id="navbarMenu" class="nav nav-pills">
                  {{#if user}}
         <li id="dashboardNav" class="nav-item">
           <a class="nav-link active" href="/">Dashboard</a>
         </li>
         <li id="accountNav" class="nav-item">
           <a class="nav-link" href="/users/account">Account</a>
         </li>
         <li id="logoutNav" class="nav-item">
           <a class="nav-link" href="/users/logout">Logout</a>
         </li>
                    {{else}}
        <li class="nav-item">
          <a class="nav-link" href="/users/login">Login</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/users/register">Register</a>
        </li>
            {{/if}}
       </ul>
    </nav>
  </div>
    <script type="text/javascript">
    $('ul.nav-pills li').on("click", "a", function() {
        alert("test");
      $(this).siblings().removeClass("nav-link active");
      $(this).addClass("nav-link active");

      //alert($this.child().href);
    });
    </script>

Answer 1

解决方案是实际上使用句柄{{#if}}块语句在服务器端执行此操作，并将句柄从路由传递给适当的变量。

Answer 2

在视图（车把）中添加以下条件：

  <a class="nav-link {{#if path "foo"}} active {{/if}}" href="/foo">Dashboard</a>

在服务器端（渲染视图的路由或控制器）中，对其进行编辑并传递path变量：

router.get('/foo', function (req, res, next) {
  res.render('foo', { title: 'foo' ,path:"foo",});
});

对您要为每个锚点添加活动CSS类的每个页面执行此操作。