node.js + jade + express: How can I create a navigation that will set class active if the path matches

问题

I have come up with the following code but the problem is, there will be duplication of the anchor tag for each menu item.Is there a better way to do this?

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

回答1:

This has a little less duplication.

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

Adding the active class might be better just done in javascript or perhaps you can get the presentation you need with the straight CSS a:active selector.

回答2:

Found this in another question that was similar:

Use a ternary at each "li"

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

You can setup your routes to pass the "menu" value instead of using "title" if you want:

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

回答3:

Here's an alternative that provides more flexibility in terms of anchor text and href than Peter's solution.

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

The caveat is that those li that are not active will have an undefined class, which does no harm in most cases.

回答4:

You can pass the pageName in the data.

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

You can call render

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

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

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

回答5:

I think it's better to set a body class to current path like so

body(class = currentPath)

So you can then use selectors such as

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

These selectors can be reduced to the minimal 'body.path .path' but it may be not isolated enough.

This will also be useful in the client side logic as this selectors could be used to determine the path in your JavaScript with something like

$("body.home").doSomethingSpecificToHome

This way your template has lot less logic.

Now, I don't think there is a way to set "currentPath" automatically depending on the URL. An helpers based on a 'url':'path' may be useful.

回答6:

Very flexible without duplication:

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}

You need to set the page's current title.

回答7:

Similar to @netAction's post, but dependent on the URL and not on the title.

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}

Combined with

app.use(function(req, res, next) {
    res.locals = {
        isAuthenticated: req.isAuthenticated(),
        path :req.path
    }

    next(); // make sure we go to the next routes and don't stop here
});

来源：https://stackoverflow.com/questions/10713923/node-js-jade-express-how-can-i-create-a-navigation-that-will-set-class-acti