選択したページのリンクの問題

Question

私は、自分のグローバルナビゲーションに1つの色を残すように指示して、どのページにいるかを知らせるより良い方法を作り出そうとしています。私が意味することは、ユーザーがホームページにいる場合です。たとえば、「ホーム」という言葉を青色にして、現在見ているページを知るようにしたいとします。

私はそれを非常にうまく説明しているかどうかはわかりませんが、あなたがjsfiddleベローを見れば、それは意味をなさないでしょう。

http://jsfiddle.net/4kUp3/

Answer 1

あなたは、現在のページのURLと、メニュー内の各リンクを比較することができます。 jQueryを使って：

$('#site_nav li a').each(function(){ 
    if($(this).attr('href') === window.location.href) { 
     $(this).parent().addClass('selected_link'); // apply style to li 
    }  
}); 

• DEMO

Answer 2

アイテムをハイライト表示するには、各ページにだけハードコードスタイルにしたくない場合は、あなたがそのリンク要素をつかむためにjqueryのを使用することができます現在のページに移動して、そのスタイルを変更してください。

Answer 3

これは正しく設定されていますが、CSSの順序は少しばかりです。

変更

.selected_link li a:link 

.selected_link a:link 

とHOMEにブルーになります。