node.js + jade + express:如果路径匹配,如何创建一个将类设置为活动的导航

Question

我已经提出了以下代码,但问题是,每个菜单项都会有重复的锚标记.有更好的方法吗？

                ul.nav
                    - if(menu="Home") 
                        li.active
                            a(href="#") Dashboard
                    else
                        li
                            a(href="#") Dashboard
                    li 
                        a(href="#") About
                    li 
                        a(href="#") Contact

Answer 1

在另一个类似的问题中找到了这个:

在每个"li"使用三元

ul
    li(class=(title === 'Home' ? 'active' : ''))
        a(href='#') Home
    li(class=(title === 'Dashboard' ? 'active' : ''))
        a(href='#') Dashboard

如果需要,您可以设置路线以传递"菜单"值而不是使用"标题":

exports.index = function(req, res) {
    res.render('index', {title: 'Home', menu: 'Home'});
}

Answer 2

这有点少重复.

ul.nav
  each name in ["Dashboard", "About", "Contact"]
    if (menu=="Home")
      li.active
        a(href="#")= name
    else
      li
        a(href="#")= name

active在javascript中添加类可能更好,或者您可以通过直接的CSS a:active选择器获得所需的演示文稿.

Answer 3

这是一种替代方案,它在锚文本和hrefPeter的解决方案方面提供了更大的灵活性.

nav
  // suppose title local denotes the active nav item
  - var nav = {}; nav[title] = 'active'
  ul
    // pass title to li class via nav object
    li(class='#{nav.Home}')
      // different href and anchor text
      a(href='/') Home
    li(class='#{nav.About}')
      a(href='/about') About
    li(class='#{nav.Contact}')
      a(href='/contact') Contact

需要注意的是,那些li不活跃的人会有一个undefined班级,在大多数情况下都没有坏处.