CODEWITHSUNDEEP
node.jstemplatespug
Evan Shortiss
Evan Shortiss

Reputation: 1658

Jade Render Header with 'active' Class

I'm struggling with what might be a simple Jade question.

I want to render a header that has the active page link rendered with the class 'active' applied, however I can't get the syntax correct. I've tried some variations of what I have below but with no luck.

ul.header
  li
    a(href='/' class=!{activePage} === 'home' ? 'active' : '') HOME
  li
    a(href='/one' class=!{activePage} === 'home' ? 'active' : '') ONE
  li
    a(href='/two' class=!{activePage} === 'home' ? 'active' : '') TWO

When I call render I pass an object like so.

app.get('/', function(req, res) {
  res.render('index', {
    activePage: 'home'
  });
});

Upvotes: 1

Views: 867

Answers (1)

Peter Lyons
Peter Lyons

Reputation: 146084

ul.header
  li
    a(href='/', class=(activePage === 'home' ? 'active' : '')) HOME
  li
    a(href='/one', class=(activePage === 'one' ? 'active' : '')) ONE
  li
    a(href='/two', class=(activePage === 'two' ? 'active' : '')) TWO

Upvotes: 3

Related Questions