Javascript Node.js、Express、EJS-导航中当前页面上的活动类

我希望根据layout.ejs模板中的页面，在每个导航链接上呈现一个“current”类

当前，我的express控制器索引如下所示：

// About
exports.about = function(req, res) {
    res.render('content/about.ejs', {
        title: 'About'
    });
};

在我的layout.ejs中，我有以下内容，我希望动态呈现它们

<ul class="nav" id="nav">
    <li><a href="/">Home</a></li>
    <li class="current"><a href="/about">About</a></li>
    <li><a href="/">Contact</a></li>
</ul>

---

关于如何实现这一点，你有什么想法吗？

你可以在

res.render

数据中加入

页面名称：'about'

，然后在模板中加入如下内容：

<li <% if (page_name === 'about') { %>class="current" <% } %> ><a href="/about">About</a></li>

---

我没有测试语法，但这就是要点。

您可以像这样向页面传递一个变量，并在class属性中使用一个条件

<a
    class="nav-link <%= page_name === 'home' && 'active' %>"
    href="#"
>
    Home
</a>

---

@奥斯汀的答案是正确的！但是我丢失了默认类，所以我找到了一种在默认类不活动时保持它的方法。 希望有一天它能帮助别人

<li            
    <% if (page_name === 'about') { %>
        class="nav-item current"
        <%} else { %>
        class="nav-item"
        <% } %> >
    <a href="/about">About</a>
</li>

首先，在主

app.js

中呈现每个页面时，我传递了一个对象

{navSelectTitle:“需要选择的页面”}

。然后，您可以在ejs模板中创建如下列表：

<% const navItems = ["home", "articles", "videos", "audios"] %>

代码逻辑如下所示：

循环浏览列表

如果列表项等于呈现页面时传递的对象值，则

li

标记将具有

class=“selected”

。如果没有，else语句将创建一个不包含所选类的普通链接

为了适应home链接应该具有

href=“/”

）的情况，在所述情况的if语句中有一个嵌套的if-else语句

---

注意：在导航栏中使用partial可以帮助您擦干代码，并使此逻辑更加方便。

谢谢。包括语法在内，它确实是正确的。非常感谢。我还没有投票权，所以我就接受了答案。从

app.get（）

的输入自动获取

page\u name

的任何方法？

req.path

可能是最接近的方法。有关文档，请参阅。您可以轻松地从路径中去掉斜线，以获得接近页面名称的内容。但是嵌套的路径名（例如

/about/fred

）那时就不太合适了。您可能会将斜杠更改为下划线，以创建一个约定，其中带下划线版本的req.path（例如，

req.path.replace（//\//g，“'.''

）表示一个页面名伟大的答案，有条件地解决了我的问题以及选项selected@thataustin但是它删除了现有的类

<% navItems.forEach(navlink => { %>
    <% if(navlink == navSelectTitle) { %>
        <% if (navlink == "home") {%>
            <li class="links selected"><a href="/"><%= navlink %></a></li>
        <% } else {%>
            <li class="links selected"><a href="/<%= navlink %>"><%= navlink %></a></li>
        <% } %>
                
    <% } else { %>
        <% if (navlink == "home") {%>
            <li class="links"><a href="/"><%= navlink %></a></li>
        <% } else {%>
            <li class="links"><a href="/<%= navlink %>"><%= navlink %></a></li>
        <% } %>
    <% } %>
<% }) %>