ExpressJs:在视图上使用Navbar

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

在我的导航栏中,当用户在当前页面上时,我有链接需要有一个class="active" 。 如果我在我的意见中使用partials。 我该怎么做呢?

样品

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> 

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

这是我的做法!通过做一个navbar每次我做一个新的一页

我应该怎么做,当我渲染一个新的页面是不需要再次渲染导航栏?

       

网上收集的解决方案 "ExpressJs:在视图上使用Navbar"

您可以将“主动”路由的值作为局部variables传递给局部variables。

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

然后,检查活动的var以在nav部分模板中设置“活动”类:

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

这是一个类似的方法

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

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

然后检索当前页面的URL,并从中检索活动页面名称。 然后使用此function将活动类添加到当前页面,

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

注意:您需要通过某个函数从您的url中检索页面名称,因为这将是整个页面的URL。

您将不得不只写一次header.ejs并将其包含在每个页面上。

希望这可以帮助!