Question

我使用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>

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>

这是我这样做的方式！每次我制作新页面时都会制作一个导航栏

如何渲染新页面并不需要再次渲染导航栏？

Answer 1

您可以将“active”路由的值作为局部变量传递给partial ..

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

Answer 2

您应该像这样加载导航 -

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

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

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

注意：您需要通过某个功能从您的网址中检索网页名称，因为它将是整页网址。

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

希望这有帮助！

ExpressJs：在视图上使用Navbar

2 个答案: