ExpressJs：在视图上使用导航栏答案

【问题标题】：ExpressJs: using Navbar on viewsExpressJs：在视图上使用导航栏
【发布时间】：2017-07-15 06:58:36
【问题描述】：

我使用 ExpressJS 和 EJS 作为我的视图。

在我的导航栏中，当用户在当前页面上时，我的链接需要有 class="active"。如果我在我的观点中使用部分。我该怎么做？

样本

Index.ejs

<ul class="nav navbar-nav navbar-right">
        <li><a class="active" href="/Index">Home</a></li>
        <li><a href="/About">About</a></li>
        <li><a href="/Work">Work</a></li>
</ul>

关于.ejs

<ul class="nav navbar-nav navbar-right">
        <li><a href="/Index">Home</a></li>
        <li><a class="active" href="/About">About</a></li>
        <li><a href="/Work">Work</a></li>
</ul>

Work.ejs

<ul class="nav navbar-nav navbar-right">
        <li><a href="/Index">Home</a></li>
        <li><a href="/About">About</a></li>
        <li><a class="active" href="/Work">Work</a></li>
</ul>

这就是我的做法！.. 每次创建新页面时都会创建一个导航栏

我应该如何做到当我渲染一个新页面时不需要再次渲染导航栏？

【问题讨论】：

如果您使用的是引导程序，您可以使用tab nav-tab，如此处所述：w3schools.com/bootstrap/bootstrap_ref_js_tab.asp 否则编写您自己的 javascript，w3schools.com/howto/howto_js_tabs.asp

标签： css node.js twitter-bootstrap express ejs

【解决方案1】：

您可以将“活动”路由的值作为本地变量传递给部分..

<%- include('partial/nav', {active: "About"}); %>

然后，检查活动变量以在导航部分模板中设置“活动”类：

<ul class="nav navbar-nav navbar-right">
     <li><a <%if(active=="Home"){%>class="active"<%}%> href="/Index">Home</a></li>
     <li><a <%if(active=="About"){%>class="active"<%}%> href="/About">About</a></li>
     <li><a <%if(active=="Work"){%>class="active"<%}%> href="/Work">Work</a></li>
</ul>

这是similar approach

【讨论】：

【解决方案2】：

你应该像这样加载你的导航——

<script>
$("#header").load("header.ejs");
</script>

然后检索当前页面的 url 并从中检索活动页面名称。然后使用该函数将活动类添加到当前页面，

$(document).ready(function($){
var url = window.location.href;
$('.nav li a[href="'+url+'"]').addClass('active');
});

注意：您需要通过某些函数从您的 url 中检索页面名称，因为它将是完整的页面 url。

您只需编写一次 header.ejs 并将其包含在每个页面中。

希望这会有所帮助！

【讨论】：