0

私はナビゲーション バーを使用しています。要素のページにあるときに、要素にアクティブなクラスを設定したいと考えています。

たとえば、現在のページの URL を確認するには jQuery が必要です。URL が の場合、http://supjamess.tumblr.com/クラスを element に追加し、クラスをelementactiveにa追加.indexしhttp://supjamess.tumblr.com/askます。activea.ask

誰かがコードを提供できれば、それは非常に役に立ちます。

4

2 に答える 2

2

私の例ではjQueryが必要です:

if ( window.location.pathname == '/' ) {
    var url_class = 'index';
} else {
    // Very first part of the path, so /path/to/url returns 'path'
    var url_class = window.location.pathname.split('/');
    url_class = url_class[1];
}

$('a.' + url_class).addClass('active');

これが基本的に行うことは、URL のパス名コンポーネント (ドメインの後、クエリ文字列の前、こちらを参照) を取得し、それが「/」、別名インデックスであるかどうかを確認し、手動で URL クラスを「index」に設定することです。 .

それ以外の場合は、URL の最初のコンポーネントを取得するため、 return 、 /askreturns ask、/questions/barreturns questions、/users/edit/5returnsなどusersに なり/tagged/layoutsます。tagged

次に、jQuery は、指定されたクラスactiveを持つ任意の要素にクラスを追加します。

于 2012-07-06T01:08:40.023 に答える
1

location.pathname に基づいて切り替える

 if (location.pathname == "/") {
      $("a.index").addClass("active");
 } else if (location.pathname == "ask") {
      $("a.ask").addClass("active");
 }
 ... and so on

追加のページが追加の else if ステートメントで追加されるため、コードは次のようになります。

 if (location.pathname == "/") {
      $("a.index").addClass("active");
 } else if (location.pathname == "/ask") {
      $("a.ask").addClass("active");
 } else if (location.pathname == "/tagged/layout") {
      $("a.layout").addClass("active");
 } else if (location.pathname == "/YOUR PATH") { // to add aditional pages, replace CAPS
      $("a.CLASS OF NAV LINK").addClass("active");
 }

jsfiddle.net またはご自身のコンソール (ほとんどのブラウザーでは f12) で javascript を試してみることができます。

于 2012-07-06T01:10:28.980 に答える