web-dev-qa-db-fra.com

jQuery ajoute une classe .active dans le menu

J'ai un problème.

Je veux ajouter la classe "active" dans le menu des éléments lorsque la page relative est activée.

le menu est très simple:

<div class="menu">

<ul>
<li><a href="~/link1/">LINK 1</a>
<li><a href="~/link2/">LINK 2</a>
<li><a href="~/link3/">LINK 3</a>
</ul>

</div>

Dans jQuery, je dois vérifier si l’URL est www.xyz.com/other/link1/

si c'est celui-ci, j'aimerais ajouter un élément de classe un l'élément 'a' de link1.

J'essaye beaucoup de solutions mais rien ne marche.

jquerymenu
33
Andrea Turri

Cliquez ici pour une solution en jsFiddle

Ce dont vous avez besoin, c’est d’obtenir window.location.pathname comme indiqué, puis de créer une expression rationnelle à partir de celle-ci et de le tester à l’aide des symboles de navigation.

$(function(){

    var url = window.location.pathname, 
        urlRegExp = new RegExp(url.replace(/\/$/,'') + "$"); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
        // now grab every link from the navigation
        $('.menu a').each(function(){
            // and test its normalized href against the url pathname regexp
            if(urlRegExp.test(this.href.replace(/\/$/,''))){
                $(this).addClass('active');
            }
        });

});
72
Tom Tu

Un moyen plus facile pour moi était:

var activeurl = window.location;
$('a[href="'+activeurl+'"]').parent('li').addClass('active');

parce que mes liens vont à l'URL absolue, mais si vos liens sont relatifs, vous pouvez utiliser:

 window.location**.pathname**
17
Pierre Michel Silva Pèrez

Récupérez les éléments, parcourez, vérifiez le HREF:

$('.menu').find('a').each(function() {
    if($(this).attr('href').indexOf('www.xyz.com/other/link1/')>0) {
          $(this).addClass('active');
    }
})
2
Diodeus - James MacFarlane

Aucune autre méthode "addClass" n'a fonctionné pour moi lors de l'ajout d'une classe à un élément 'a' du menu sauf celui-ci:

$(function () {
        var url = window.location.pathname,
    urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");  
        $('a').each(function () {
                            if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
                $(this).addClass('active');
            }
        });
    });

Cela m'a pris quatre heures pour le trouver.

2
betty.88

La réponse de Wasim quelques messages plus haut fonctionne comme annoncé:

http://jsfiddle.net/Realto619/jKf3F/1/

2
Realto619

Vérifiez ceci celaFONCTIONNE

Html 

<div class="menu">

    <ul>
        <li><a href="~/link1/">LINK 1</a>
        <li><a href="www.xyz.com/other/link1">LINK 2</a>
        <li><a href="~/link3/">LINK 3</a>
    </ul>

</div>

Jquery 

$(document).ready(function(){
    $(".menu ul li a").each(function(){
        if($(this).attr("href")=="www.xyz.com/other/link1")
            $(this).addClass("active");
    })
})
2
Wazy

window.location.href vous donnera l'URL actuelle (comme indiqué dans l'adresse du navigateur). Après l'analyse et l'extraction de la partie pertinente, comparez-la avec chaque lien href et affectez la classe active au lien correspondant.

1
Darin Dimitrov

Utilisez window.location.pathname et comparez-le avec vos liens. Vous pouvez faire quelque chose comme ça:

$('a[href="~/' + currentSiteVar + '/"').addClass('active');

Mais vous devez d’abord préparer currentSiteVar pour le mettre en sélecteur.

1
Marek Tuchalski

J'imagine que vous essayez de mélanger du code Asp et du code JS et que, à un moment donné, cela rompt ou n'excuse pas correctement les appels de liaison.

Peut-être pourriez-vous utiliser un délégué à la place. Cela réduira la complexité de savoir quand lier l'événement click.

Un exemple serait:

$('body').delegate('.menu li','click',function(){
   var $li = $(this);

   var shouldAddClass = $li.find('a[href^="www.xyz.com/link1"]').length != 0;

   if(shouldAddClass){
       $li.addClass('active');
   }
});

Pour voir si cela aide, il utilise l'attribut Attribute Starts With Selector de jQuery.

Chi

1
Chi Chan

En configurant le menu actif, ils ont les nombreuses façons de le faire. Maintenant, je vous partage un moyen de définir le menu actif par CSS.

    <a href="index.php?id=home">Home</a>
    <a href="index.php?id=news">News</a>
    <a href="index.php?id=about">About</a>

Maintenant, vous ne définissez que $_request["id"] == "home" puis echo "class='active'", nous pouvons alors faire la même chose avec les autres.

<a href="index.php?id=home" <?php if($_REQUEST["id"]=="home"){echo "class='active'";}?>>Home</a>
<a href="index.php?id=news" <?php if($_REQUEST["id"]=="news"){echo "class='active'";}?>>News</a>
<a href="index.php?id=about" <?php if($_REQUEST["id"]=="about"){echo "class='active'";}?>>About</a>

Je pense que c'est utile avec vous.

0
Hueston Rido
$(function() {
     var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
     $(".nav li").each(function(){
          if($('a',this).attr("href") == pgurl || $('a', this).attr("href") == '' )
          $(this).addClass("active");
     })
});
0
mdubey
<script type="text/javascript">
    jQuery(document).ready(function($) {
    var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$"); 
    $("#navbar li a").each(function() {//alert('dsfgsdgfd');
    if(urlRegExp.test(this.href.replace(/\/$/,''))){
    $(this).addClass("active");}
});
}); 
</script>
0
princespn

Cela fonctionne pour moi, fondamentalement, la navigation est la même

<div id="main-menu">
  <ul>
    <li><a href="<?php echo base_url();?>shop">SHOP</a>
    <li><a href="<?php echo base_url();?>events">EVENTS</a>
    <li><a href="<?php echo base_url();?>services">SERVICES</a>
  </ul>
</div>

Disons que vous êtes à l'URL: http: // localhost/nom_projet/shop/detail_shop/

Et vous voulez que le lien "SHOP" devienne "actif" afin que vous puissiez indiquer visuellement qu'il s'agit de la navigation active, même si vous vous trouvez dans la sous-page de "boutique" de "detail_shop". 

Le javascript:

var path = window.location.pathname;
var str = path.split("/");
var url = document.location.protocol + "//" + document.location.hostname + "/" + str[1] + "/" + str[2];

$('#main-menu a[href="' + url + '"]').parent('li').addClass('active');
  1. str recevra , nom_projet, shop, detail_shop
  2. document.location.protocol obtiendra http:
  3. document.location.hostname obtiendra localhost
  4. str [1] obtiendra nom_projet
  5. str [2] obtiendra shop

Essentiellement, cela fera correspondre les liens de l'attribut nav dont le préfixe href commence par "shop" (ou quel que soit le répertoire secondaire).

0
aidil

ça marche pour moi: D

    function setActive() {
      aObj = document.getElementById('menu').getElementsByTagName('a');
      for(i=0;i<aObj.length;i++) {
        if(document.location.href.indexOf(aObj[i].href)>=0) {
          var activeurl = window.location;
          $('a[href="'+activeurl+'"]').parent('li').addClass('active');
        }
      }
    }

    window.onload = setActive;
0
ariechaezars