1

如何根据 URL 将活动标签设置为类？

在下面的示例中，“/”（主页）设置为活动。

.nav-collapse.collapse
  ul.nav.top-2
    li.active
      a(href='/') Home
    li
    li
      a(href='/about') About
    li
    li
      a(href='/contact') Contact
    li

在页面中注入一些东西以将其识别为活动页面会更好吗？

4

3 回答 3

10

这就是我所做的，比如六氰化物的例子，

res.render('/path', {
  path: req.path
});

..在 layout.jade 中：

.nav-collapse.collapse
  ul.nav.top-2
    li(class=path=='/'?'active':undefined)
      a(href='/') Home
    li(class=path=='/about'?'active':undefined)
      a(href='/about') About
    li(class=path=='/contact'?'active':undefined)
      a(href='/contact') Contact
于 2013-05-14T23:28:03.173 回答
1

您还可以考虑将 id 添加到 body 标记中，它会告诉您您在哪个页面上。然后您可以指定依赖于该 ID 的简单 CSS 规则。这是非常流行的方案，例如由 Wordpress 提供。

对于这个 id，你可以使用 render 方法提供的 Jade 变量。

在您的快速代码中：

res.render('/', { id : 'home' });

在模板中：

body##{id}

后来在ul.nav

li.home
  a(href='/') Home
li
li.about
  a(href='/about') About
li
li.contact
  a(href='/contact') Contact

在CSS中：

#home ul.nav li.home {
    background: red;
}

#about ul.nav li.about {
    background: red;
}
于 2013-05-14T21:11:14.687 回答
0

看看 Jade 的条件，记录在GitHub 上。您可能希望将路径传递给 Express 中的渲染，如下所示：

res.render('/path', {
  path: req.path
});

然后在 Jade 中，您将使用如下条件：

if path == 'home'
  //active styling
else
  //not active
于 2013-05-14T20:59:11.280 回答