jQueryはページURLに基づいてクラスを追加します

私は何を持っていますは簡単な質問ですが、私はそれを私の人生のために働かせることはできません。jQueryはページURLに基づいてクラスを追加します

私がしたいのは、URLに基づいてメインページコンテナにクラスを追加するページにいくつかのjavascriptを追加することです。

のは（緩く話す）私はroot.comのサイトと次のHTML構造を持っているとしましょう：私は何をしたいか

<html> 
    <head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    </head> 
    <body> 
    <div id="main" class="wrapper"> 
     Blah, blah, blah 
    </body> 
</html>

は、ページ=（たとえば）ルートであればスクリプトです.com/technologyでは、メインディビジョンにクラスを追加します。 divは次のようになります：

 <div id="main" class="wrapper tech">

私はjqueryをロードしました。そのようにしたいと思います。

出典

2012-04-02 Matt Martin

に関連する情報の富の富ことができますwindow.locationを使用して現在のURLを取得し、それに基づいて切り替えます。

$(function() { 
    var loc = window.location.href; // returns the full URL 
    if(/technology/.test(loc)) { 
    $('#main').addClass('tech'); 
    } 
});

正規表現を使用して、URLに特定の語句（特に、technology）が含まれているかどうかを確認し、そうであれば、#main要素にクラスを追加します。

出典

2012-04-02 20:13:46

これは動作します。ありがとう。 –

優秀な作品はよかったよ。 – 422

@alex vidalそれは私のためにうまく動作しますが、それは通常より少し遅れてロードしています。私はこのアクションを使用して、サブメニューを開いたままにしておくと、ユーザが決定されます。したがって、サブカテゴリメニューがどのように表示されるかを1〜2秒後に確認できます。これを即座にやりたいのですが、どうすればこの問題を回避できますか？ –

location組み込みオブジェクトを使用して完全なURLまたはその一部を特定します。

出典

2012-04-02 20:09:35 kirilloid

これは間違いなく正しいですが、私はそれをどうやって行うのかについて完全には答えていません。 –

以下のようなものがありますか？他の回答に基づいて、ちょうど

にconsole.log（window.locationの）

をすることによって、あなたはあなたの場所のオブジェクトを使用でき

 if(window.location.href=== "root.com/technology") { 
     $("#main").addClass("tech"); 
    }

出典

2012-04-02 20:11:58 DG3

さて、ここで私はそれを行うだろうかです：

switch (window.location.pathname) { 
    case '/technology': 
     $('#main').addClass('tech') 
    case '/something': 
    case '/somestuff': 
     $('#main').addClass('some') 
}

この方法では、あなたはきれいにあなたのコードを維持し、あなたは簡単に別のケースを追加することができます。

hereを参照してください。window.location.pathnameを意味します。

出典

2012-04-02 21:05:54

私はこれが好きです、あなたが言うように、あなたは簡単に物事を上げずに別のケースを追加することができます。しかし、私はそれを働かせることはできません... –

私はこの答えが好きで、選択された "最高の"答えが好きです。 switch文は、よりクリーンで、条件文を書き出す方法です。 – IE5Master

jQueryはページURLに基​​づいてクラスを追加します

答えて

関連する問題

jQueryはページURLに基づいてクラスを追加します