bootstrap: comment activer un menu?

Question

J'ai un menu dans mon fichier header.jsp. comme ceci:

<ul class="nav nav-pills"> 

<li class="active"><a href="index.jsp">home</a></li> 

<li><a href="product.jsp">product</a></li> 

</ul> 

Les deux index.jsp et product.jsp comprennent header.jsp. Par défaut, l'élément Accueil est sélectionné et actif. Quand je clique sur le menu de produit, il est navigué à la page de product.jsp, l'article de produit devrait être actif, ma question est comment placer le <li> Produit </li > comme class = "active"?

Votre réponse est appréciée. Grand merci.

Answer 1

Vous devez réfléchir à la manière dont vous identifieriez la page active et demander au navigateur d'appliquer la classe active qui est active.

Une option serait de coder en dur dans le script de chaque page;

//html 
<ul class="nav nav-pills"> 

<li id="home"><a href="index.jsp">home</a></li> 

<li id="product"><a href="product.jsp">product</a></li> 

</ul> 

<script> 
$('#product').addClass('active'); 
</script> 

mais cela prend du temps, surtout si vous avez plus de 6 pages. Il existe des moyens bien meilleurs et plus dynamiques de le faire.

Answer 2

Je sais c'est une vieille question, mais si vous êtes à la recherche d'une solution front-end basé sur jQuery que vous pourriez faire quelque chose comme:

$(function() { 
    $('ul.nav li a[href$="' + window.location.pathname+ '"]').parent().addClass("active"); 
}); 

Cela ajoutera dynamiquement une classe active à la société mère (dans votre cas <li>) de l'élément <a> si l'attribut href correspond au chemin de l'URL. Le changement que vous aurez besoin de faire est d'écrire le chemin complet - si:

<ul class="nav nav-pills"> 
    <li id="home"><a href="/actual/site/path/index.jsp">home</a></li> 
    <li id="product"><a href="/actual/site/path/product.jsp">product</a></li> 
</ul> 

Cette solution est effectuée par des paramètres de hachage ou d'une requête en annexe au lien qu'il ne vérifie que le chemin.