Node.js Express + Jade（線條上的活動類）

如何根據URL將活動標籤設置爲類？Node.js Express + Jade（線條上的活動類）

在下面的示例中，'/'（主頁）設置爲活動。

.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

將某些東西注入頁面以將其標識爲活動頁面會更好嗎？

來源

2013-05-14 John Pogosyan

哪些額外的空裏的呢？ –

可能重複[Jade：更改父模板中的活動菜單項]（http://stackoverflow.com/questions/15719660/jade-change-active-menu-item-in-parent-template） – Pickels

看看玉的條件，記錄在GitHub。您想要通過在快速的渲染，像這樣的路徑：

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

然後在玉，你會使用條件，像這樣：

if path == 'home' 
    //active styling 
else 
    //not active

來源

2013-05-14 20:59:11 hexacyanide

要小心路徑會來與前面的斜線 – tdecs

您也可以考慮加入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-14 21:11:14

這是我做的，像六氰化物的例子，

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-14 23:28:03

Node.js Express + Jade（線條上的活動類）

回答

相關問題