Установите элемент навигации Boostrap "активный" с помощью паруса. js - PullRequest
Новая
       7

Установите элемент навигации Boostrap "активный" с помощью паруса. js

0 голосов
/ 21 марта 2020

Boostrap позволяет легко установить элемент навигации «активный», чтобы пользователи знали, на какой странице они находятся ( дополнительная информация ). Как динамически установить / удалить «активный» класс CSS из элемента навигации в Sails. js? 

<ul class="navbar-nav ml-auto">
  <li class="nav-item active" id="map-item">
    <a class="nav-link" href="/">Map</a>
  </li>  
  <li class="nav-item active" id="faq-item">
    <a class="nav-link" href="/faq">FAQ</a>
  </li>
  <li class="nav-item active" id="contact-item">
    <a class="nav-link" href="/contact">Contact</a>
  </li>  
</ul>

* * * * * * * * * * * * * * * * * * * * * * * * * * JavaScript или AJAX, но я не знаю, как я могу использовать это в Sails. js.

У меня есть файл layout.e js, который определяет общий макет каждой страницы, и тогда у меня есть js страниц для карты, FAQ и контактов. В идеале было бы лучше изменить только одну часть кода на случай, если я решу добавить больше страниц позже.

1 Ответ

0 голосов
/ 28 апреля 2020

Для решения исключительно Sails JS вы можете использовать следующее: req.path, ссылка здесь , чтобы получить URL-адрес запроса и передать его в ваше представление. Так, например, URL-адрес www.sailsapp.com/faq с использованием let a = req.path в контроллере даст вам переменную a со значением ' / faq '. Тогда, по вашему мнению, вы можете использовать if like 

<li class="nav-item active" id="faq-item">
<a class="nav-link <% if (a == '/faq') {%> active <%}%>" href="/faq">FAQ</a>
</li>

. Вы можете использовать этот лог c для любой из ссылок, на которые вы sh перейдете.

...