mettre en évidence le lien sélectionné dans le menu bar

Question

css

J'ai une page avec cette URL: http://localhost:8000/progress/c/?l=1&c=1

Et le contenu ci-dessous pour travailler comme une simple barre de menu css. style

<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 est

.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; 
} 

Quand je passe la souris sur les liens les changements de couleur d'arrière-plan, mais le lien de menu sélectionné est pas surligné en bleu. J'utilise le framework django.

Answer 1

Remplacez votre id #active à la classe .active - qui est beaucoup plus droite:

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

et ajoutez cette classe à l'élément actif dans votre liste:

<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 

Il dit le texte actif Le lien a besoin d'un identifiant d'actif. Je ne vois pas d'identifiant, donc pourquoi ce n'est pas bleu.

Si vous souhaitez que le lien soit actif, vous devez définir l'élément pour être actif, le navigateur ne le fera pas pour vous.

Answer 3

Dans votre CSS, vous avez une classe avec l'identifiant « actif », cela devrait probablement être une classe comme ceci:

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

De plus, je ne recommanderais pas essayer de faire correspondre le « actif » ou mieux Formulé la page 'actuelle' en utilisant le côté client javascript.

Au lieu de votre script sur le serveur doit reconnaître la page en cours et ajouter une classe à l'élément de menu correspondant il ressemblerait à ceci:

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

Answer 4

Essayez ce code jQuery, il ajoutera la classe automatiquement

$(function(){ 

    var url = window.location.href; 

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

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

}); 

Answer 5

Juste

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> 

scénario

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