通过Sails.js将Boostrap导航项设置为“活动”

Question

引导程序使将导航项设置为“活动”变得很容易，以便用户知道他们所处的页面（more info）。如何从Sails.js的导航项中动态设置/删除“活动的” CSS类？

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

[在线有are个使用普通JavaScript或AJAX的解决方案，但我不知道如何在Sails.js中实现。

我有一个layout.ejs文件，该文件定义了每个页面的总体布局，然后有用于地图，常见问题和联系方式的ejs页面。理想情况下，最好只更改代码的一部分，以防以后我决定添加更多页面。

Answer 1

对于纯Sails JS解决方案，您可以执行以下操作使用req.path（引用为here）获取请求URL并将其传递到您的视图中。因此，例如，URL是www.sailsapp.com/faq，在控制器中使用let a = req.path将为变量a提供值为'/ faq'。然后，在您看来，您可以使用if if

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

您可以对任何想要的链接使用此逻辑。