2017-06-17 10 views
0

基本的には、ユーザーがウェブサイトで選択したURLに応じて異なる背景が表示されるようにしたいと考えています。URLに基​​づいてクラス/インデックスを追加する

例:

は<をexample.com/#red - 赤BG

example.com/#blue < - ブルーBG

私の考えは、そのインデックスを追加持っているし、それを使用していましたスタイルクラスとしては機能しませんでした。

私はインターネット上を見渡して、うまく動作していないものは見つかりませんでした。私は完全に

....失った私が試したよ:

あなたがインデックスによって何を意味するか
if(window.location.href == "http://www.example.com/#red"){ 
    $('body').addClass('red'); 
} else if(window.location.href == "http://www.example.com/#blue"){ 
    $('body').addClass('blue'); 
        ---[10 more colors]--- 
} else { 
exit(); 
} 
+0

phpを使用すると、ページが読み込まれる前に簡単にボディクラスをマークアップに追加できます。それから、そのボディクラスのためのCSSがあります... https://codex.wordpress.org/Plugin_API/Filter_Reference/body_class – Mohsin

答えて

0

わからない、しかし、あなたはlocation.hashを使用し、最初の文字を削除することができ、あなたの現在の例で:

あなたは置き換えることができますチェックのために
$(document).ready(function() { 
    var color = window.location.hash.slice(1); 
    $('body').addClass(color); 
}); 

場合/他のスイッチとの比較、または配列内の一致する色を入れて、colorが一致した場合に任意のは、その後addClassを行います。

EDIT:例えば:

$(document).ready(function() { 
    var matchColors = ["red", "green", "blue"]; 
    var color = window.location.hash.slice(1); 
    if (matchColors.indexOf(color) != -1){ 
     $('body').addClass(color); 
    } 
}); 

はまた、代わりにハッシュのは、URLパラメータを使用して検討したのですか? (location.searchを使用して取得できます)

関連する問題