L'ajout de "actif" de la classe actuelle de l'élément de menu w/ JQuery

Il y a eu plusieurs solutions, mais je n'ai pas eu de chance en le faisant travailler. JQuery débutant d'essayer de travailler à travers une solution pour ajouter un "actif" de la classe à l'actif de l'élément de liste dans un simple menu de navigation:

   <div id="main-menu">

      <ul>
         <li><a href="/site/about">About Us</a></li>
         <li><a href="/site/work">Our Work</a></li>
         <li><a href="/site/contact">Contact Us</a></li>    
      </ul>

    </div>

Un précédent post DONC indiqué que cela a fonctionné, mais je n'ai pas eu de succès jusqu'à présent. J'utilise assez permaliens de wordpress, de sorte que le chemin d'accès complet à n'importe quelle page, c'est comme:

http://www.foobar.com/site/about/

C'est mon travail jusqu'à présent:

<script>
$(function(){
    var url = window.location.pathname,
        urlRegExp = new RegExp(url.replace(/\/$/,''));    
        $('#main-menu li').each(function(){
            if(urlRegExp.test(this.href)){
                $(this).addClass('active');
            }
        });
});
</script>

J'ai essayé plusieurs solutions, y compris la modification de la façon dont j'écris le href, etc. La partie du code, je suis vraiment de brouillard sur ce qu'est l'urlRegExp partie...Toute aide?

vous essayez de trouver un href dans un <li>.
Pourquoi ne pas utiliser ce que WordPress a à offrir dans les classes, qu'il définit dans le <body> comme une réponse précédente, j'ai fait sur DONC, stackoverflow.com/a/12272075/600101? Pas de JS, seulement WP et CSS symbios. Sauve le monde des arbres. 🙂

OriginalL'auteur TheNally | 2012-09-19

5

essayer avec
```
    $('#main-menu li a').each(function(){
        if(urlRegExp.test(this.href)){

        ...
    });
```
au lieu de
```
    $('#main-menu li').each(function(){
        if(urlRegExp.test(this.href)){
        ...
    });
```
depuis href attribut que vous êtes à la recherche de la ligne suivante avec this.href est appliqué sur les liens, et non sur la liste des articles

alors, si vous avez besoin d'appliquer de la classe active sur <li> élément suffit d'utiliser
```
 $(this).parent().addClass('active'); 
 //or  $(this).closest('li').addClass('active');
 //or pure-JS : this.parentNode.className += 'active';
```
Alors peut-être ajouter la classe à la parent()?
"$(this).attr('href')" mieux que "cette.href", n'est-ce pas ?
Non, est moins efficace car vous êtes 1) l'appel de la jQuery fonction 2) l'appel de la méthode attr()
Je vois, merci... signifie que cette.href utilisation de JS uniquement et pas de JQuery... Pour beaucoup d'utilisation de JQuery tuer JS efficacité parfois... :o)
Je suis d'accord, vous pourriez aussi bien utiliser this.href, mais ça ne sera pas que beaucoup de rendement, d'un tueur à utiliser jQuery pour l'obtenir. Certaines personnes aiment à utiliser jQuery pour tout ce qui est possible quand ils utilisent déjà pour une grande partie du code, donc c'est à eux. Aussi, je pense href est assez sûr, mais jQuery serait de prendre soin de la croix-navigateur problèmes lors de la tentative node.href, dans le cas où l'utilisation d' .quelque chose qui n'est pas pris en charge, ou tout bizarre de problèmes.

OriginalL'auteur fcalderan
2

.href mal ($(this), plus vous avez de contrôle sur un élément de liste, plutôt que de li. Essayez ceci:
```
$('#main-menu li > a').each(function(){
        if(urlRegExp.test($(this).attr('href'))){
            $(this).addClass('active');
        }
    });
```
c'.href n'est pas mauvais: il fonctionne parfaitement et il est plus efficace que de passer à travers $ (), fonction

OriginalL'auteur Chris Dixon

Vous devez vous connecter pour publier un commentaire.