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

在另一个question that was similar中找到了这个：

在每个“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

在javascript中添加active类可能会更好，或者您可以使用直接的CSS a:active选择器获得所需的演示文稿。

Answer 3

这是一种替代方案，在锚文本和href方面提供了比彼得解决方案更多的灵活性。

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类，在大多数情况下都不会造成伤害。

Answer 4

您可以在数据中传递pageName。

each menu in ["Home", "Dashboard", "Contact", "About"]
    if (menu == pageName)
      li.active
        a(href="/#{menu}")= menu
    else
      li
        a(href="/#{menu}")= menu

您可以调用渲染

res.render("index", { pageName: 'Home'})

res.render("index", { pageName: 'Dashboard'})

res.render("index", { pageName: 'Contact'})

Answer 5

我认为将体类设置为当前路径更好

body(class = currentPath)

因此，您可以使用选择器，例如

body.home .nav li.home, body.dashboard .nav li.dashboard {
  Style when current path
}

这些选择器可以减少到最小的'body.path .path'，但它可能不够孤立。

这在客户端逻辑中也很有用，因为这个选择器可用于确定JavaScript中的路径，如

$("body.home").doSomethingSpecificToHome

这样你的模板逻辑就少了很多。

现在，我认为没有办法根据URL自动设置“currentPath”。基于'url'：'path'的助手可能很有用。

Answer 6

非常灵活，没有重复：

ul
  each menuitem in [{title:'Home',url:'/'},{title:'About',url:'/about'},{title:'Contact',url:'/contact'}]
    if (menuitem.title == title)
      li.active
        a.active(href=menuitem.url) #{menuitem.title}
    else
      li
        a(href=menuitem.url) #{menuitem.title}

您需要设置页面的当前标题。

Answer 7

类似于@ netAction的帖子，但取决于网址而不是标题。

<div id=mcss_option_list>
   {{myData.TimeOfEvent}}
</div>

结合

each menuitem in [{title:'Home',url:'/'},{title:'About',url:'/about'},{title:'Contact',url:'/contact'}]
    if (path == menuitem.url)
        li.active
            a.active(href=menuitem.url) #{menuitem.title}
    else
        li
            a(href=menuitem.url) #{menuitem.title}

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

7 个答案: