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每次我做一个新的一页

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

Answer 1

您可以将“主动”路由的值作为局部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> 

这是一个类似的方法

Answer 2

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

 <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并将其包含在每个页面上。

希望这可以帮助！