Попытка динамически изменить «активный» класс в навигационной панели - Node.js / Express / Handlebars - PullRequest
Новая
       11

Попытка динамически изменить «активный» класс в навигационной панели - Node.js / Express / Handlebars

0 голосов
/ 19 мая 2018

У меня небольшая проблема в попытке установить «активный» класс, когда я нажимаю на ссылку, чтобы я знал, на какой странице я нахожусь. В настоящее время происходит, когда я нажимаю на другую вкладку, она устанавливает ее »active ", но затем исчезает при загрузке страницы.

Я использую Node.js, Express, Handlebar и Bootstrap.У меня есть ощущение, что это должно быть связано с тем, что class = "nav-link active" находится в теге вместо тега ?

Также вы можете найти краткий видеоролик по описанной проблеме:

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>

1 Ответ

0 голосов
/ 20 мая 2018

Решением было на самом деле сделать это на стороне сервера с помощью операторов блока {{#if}} руля и передать рулю соответствующую переменную из маршрутов.

...