Menu jQuery - État actif Basé sur l'URL

Question

J'essaie simplement de convertir un état actif en un menu HTML statique. Le menu présente la structure suivante: -

<div id="navbar"> 
ul id="MenuBar1" class="MenuBarHorizontal"> 
    <li><a href="index.htm">Home</a></li> 
    <li><a href="about.htm">About Us</a></li> 
    <li><a href="products.htm">Products</a> 
    <ul> 
     <li><a href="product-grp1">Product Groups 1</a> 
     <ul> 
      <li><a href="product1.htm">Product 1</a> 
      <li><a href="product2.htm">Product 2</a> 
      <li><a href="product3.htm">Product 3</a> 
     </ul> 
     </li> 
    </ul> 
    </li> 
</ul> 
</div> 

Vous pouvez voir que c'est un système de menu à 3 niveaux qui affiche effectivement un menu méga.

Ce que je voudrais faire est, en fonction de l'URL de la page que vous êtes sur, ajouter un état actif au menu de niveau supérieur. Cet état actif devrait indiquer si vous êtes sur une page de deuxième ou de troisième niveau. Je dois le faire en fonction de l'URL de la page plutôt que d'un simple clic car le site a beaucoup de liens directement depuis Google vers des pages spécifiques, donc je vais devoir montrer où ils se trouvent aussi.

Notez que la structure du fichier est plat de sorte que chaque URL est http://www.thesite.com/about.htm etc.

J'ai essayé de régler cette question des questions précédentes, mais ne peut pas le faire fonctionner. Je suppose que c'est à cause de la profondeur du menu, mais j'apprécierais vraiment les conseils que tout le monde peut me donner.

---

MERCI pour votre aide. Cela m'a vraiment mis sur la bonne voie. En fin de compte je les suivantes: -

/* The following adds active to the next level up of the url */ 
$('#MenuBar1 li a').each(function() { 
if(filename == $(this).attr('href')) { 
     $(this).addClass('active'); 
} 
}); 

/* The following line looks for the .active class, then the parent of it with the #navbar ul.... structure, then adds the active class to that one only */ 
$('.active').parents('#navbar ul.MenuBarHorizontal li').addClass('active-top'); 
$('#navbar ul.MenuBarHorizontal>li').addClass('menu-top'); 

Qu'est-ce que cela ne sert jQuery pour ajouter une classe .active le lien particulier, ajoute alors un .active-top aux parents (tous, malheureusement, comme je Je n'ai pas pu déterminer comment cibler le niveau que je voulais). La dernière ligne ajoute une classe .menu-top au niveau supérieur du menu.

Cette structure me permet de cibler uniquement le niveau supérieur du menu sans que la mise en forme ne descende du DOM vers d'autres sélecteurs enfants. Ce n'est probablement pas la solution la plus élégante, mais cela fonctionne.

Merci encore à tous ceux qui m'ont donné des conseils.

Answer 1

Vous pouvez obtenir le actuel avec JavaScript en utilisant window.location.pathname. Vous pouvez vérifier avec jQuery en utilisant quelque chose comme:

$("#navbar a[href=" + window.location.pathname + "]").addClass('active'); 

Cela ajoutera la classe active à tous les points d'ancrage dans #navbar qui ont le même href attribut que le chemin actuel. Vous devrez peut-être couper la barre oblique.

Answer 2

utilisation window.location.href pour obtenir l'emplacement actuel en cours d'URL du navigateur ... et addClass() pour ajouter un nom de classe au lien ... inmycase J'ajoute active

essayer

<script> 
$(function(){ 
    var currenthref=window.location.href; 
    $("#navbar a[href=" + currenthref + "]").addClass('active'); //adds active class to the current url. 

}) 
</script> 

Answer 3

Vous pourrait faire quelque chose comme ceci:

var url = window.location.pathname; 
var filename = url.substring(url.lastIndexOf('/')+1); 

$('#MenuBar1 a').each(function() { 
    if(filename == $(this).attr('href')) { 
      $(this).addClass('active'); 
    } 
}); 

Si vous avez besoin de la classe appliquée à la li faire quelque chose comme ceci:

var url = window.location.pathname; var nomfichier = url.substring (url.lastIndexOf ('/') + 1);

$('#MenuBar1 a').each(function() { 
    if(filename == $(this).attr('href')) { 
      $(this).parent('li').addClass('active'); 
    } 
}); 

Les réponses ci-dessus sortiront incorrectes, car ils donnent le chemin complet si votre URL est comme ceci:

http://www.thesite.com/about.htm 

Le « window.location.pathname » va retourner ceci:

/about.htm 

donc, vous devez faire quelque chose comme ceci afin de laisser le balisage la façon dont vous l'avez et obtenir le résultat souhaité ou vous pouvez simplement des barres obliques à l'avant précédez de href.

var url = window.location.pathname; 
var filename = url.substring(url.lastIndexOf('/')+1); 

$("#navbar a[href=" + filename + "]").addClass('active'); 

Answer 4

Commander le violon ici: http://jsfiddle.net/EVmsY/

$(function(){ 
    var url = 'http://www.thesite.com/product1.htm'; // window.location; 
    var page = url.substr(url.lastIndexOf('/') + 1); 

    if (page) { 
    $('#MenuBar1 li a[href="' + page + '"]').addClass('active'); 
    $('.active').parents().children('li a').addClass('active'); 
    } 
});