ハイライトは現在、私はこのURLでページを持っているCSSのメニューバー

Question

でリンクを選択しました。

<div class="menu_div"> 
    <ul> 
     <li><a href="/progress/c/?l=1&c=1"> l1c1 </a></li> 
     <li><a href="/progress/c/?l=2&c=1"> l1c1 </a></li> 
     <li><a href="/progress/c/?l=3&c=1"> l1c1 </a></li> 
     <li><a href="/progress/c/?l=4&c=1"> l1c1 </a></li> 
    </ul> 
</div> 

CSSのスタイリング私は、背景色の変更が、現在選択されているメニューリンクは青色で強調表示されていないリンクの上にカーソルを移動すると

.menu_div ul 
{ 
    padding:6px; 
    margin:0px; 
    font-size:12px; 
    list-style:none; 
    text-indent:15px; 

} 
.menu_div ul li 
{ 
    line-height:28px; 
    border-bottom:1px solid #000; 
} 
.menu_div ul li a 
{ 
    text-decoration:none; 
    font-color:#3A332D; 
    display:block; 
} 
.menu_div ul li a:hover 
{ 
    background:blue; 
} 
.menu_div ul li#active 
{ 
    background:blue; 
} 

です。

私はdjangoフレームワークを使用しています。

Answer 1

クラス.activeにあなたのID #activeを交換してください - それは、より正しい方法です：

.menu_div ul li.active 
{ 
    background:blue; 
} 

とリスト内の能動素子にこのクラスを追加します。

<div class="menu_div"> 
    <ul> 
     <li class="active"><a href="/progress/c/?l=1&c=1"> l1c1 </a></li> 
     <li><a href="/progress/c/?l=2&c=1"> l1c1 </a></li> 
     <li><a href="/progress/c/?l=3&c=1"> l1c1 </a></li> 
     <li><a href="/progress/c/?l=4&c=1"> l1c1 </a></li> 
    </ul> 
</div> 

Answer 2

.menu_div ul li#active 

これは、アクティブを語りますリンクにはアクティブなIDが必要です。私はIDを見ない、なぜそれは青ではないのですか？

リンクをアクティブにするには、アイテムをアクティブにする必要があります。ブラウザはそれを実行しません。 「アクティブ」

あなたはidを持つクラスを持って、あなたのCSSで

Answer 3

が、これはおそらく、このようなクラスでなければなりません：

.menu_div ul li.active 
{ 
    background:blue; 
} 

さらに、私は「アクティブ」以上に一致するようにしようとお勧めしませんJavascriptクライアント側を使用して「現在の」ページを作成しました。

代わりに、サーバー上のスクリプトは、現在のページを認識し、それは次のようになりますので、関連するメニュー項目にクラスを追加する必要があります

<li class="active"><a href="/progress/c/?l=1&c=1"> l1c1 </a></li> 

Answer 4

は、このjQueryのコードを試してみて、それが自動的にクラスを追加します

$(function(){ 

    var url = window.location.href; 

    $("#menu a").each(function() { 

     if(url == (this.href)) { 
      $(this).closest("li").addClass("active"); 
     } 
    }); 

}); 

Answer 5

だけ

CSS

.menu_div ul li.active{background:blue} 

HTML

<div class="menu_div"> 
    <ul> 
     <li id="page1"><a href="/progress/c/?l=1&c=1"> l1c1 </a></li> 
     <li id="page2"><a href="/progress/c/?l=2&c=1"> l1c1 </a></li> 
     <li id="page3"><a href="/progress/c/?l=3&c=1"> l1c1 </a></li> 
     <li id="page4"><a href="/progress/c/?l=4&c=1"> l1c1 </a></li> 
    </ul> 
</div> 

スクリプト私はあなた `localhost` URLは、世界の残りの部分のためにアクセス可能ではないと信じて

#In every page just put this script and change the id 
<script>$("#page1").addClass('active');</script>