1

URL に応じてアクティブなタグをクラスに設定するにはどうすればよいですか?

以下の例では、'/' (ホーム) がアクティブに設定されています。

.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

ページをアクティブなページとして識別するために、ページに何かを挿入したほうがよいでしょうか?

4

3 に答える 3

10

ヘキサシアニドの例のように、これが私がしていることです。

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-14T23:28:03.173 に答える
1

body タグに id を追加することを検討することもできます。これにより、あなたがどのページにいるかがわかります。そして、その 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-14T21:11:14.687 に答える
0

GitHubで文書化されている Jade の条件を見てみましょう。次のように、パスを Express でレンダーに渡します。

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

次に、ジェイドでは、次のように条件を使用します。

if path == 'home'
  //active styling
else
  //not active
于 2013-05-14T20:59:11.280 に答える