JQuery ajouter une classe au lien actif

Question

J'essaie d'ajouter une classe active à un lien mais je n'arrive pas à le faire fonctionner.

Disons que j'ai le code HTML suivant:

<ul class="nav navbar-nav"> 
    <li class="menu_li"> <a href="http://192.168.215.248/public">Home</a> 
    </li> 
    <li class="menu_li dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" style="cursor: pointer;">Partijen<span class="caret"></span> </a> 
     <ul class="dropdown-menu" role="menu"> 
      <li> <a href="http://192.168.215.248/public/partijen/1">Actief</a> 
</li> 
      <li> <a href="http://192.168.215.248/public/partijen/0">Inactief</a> 
      </li> 
      <li class="divider"></li> 
      <li> <a href="http://192.168.215.248/public/telers">Telers</a> 
      </li> 
      <li> <a href="http://192.168.215.248/public/handelshuis">Handelshuis</a> 
      </li> 
      <li> <a href="http://192.168.215.248/public/ras">Ras</a> 
      </li> 
      <li> <a href="http://192.168.215.248/public/klasse">Klasse</a> 
      </li> 
      <li> <a href="http://192.168.215.248/public/perceel">Perceel</a> 
      </li> 
      <li> <a href="http://192.168.215.248/public/maat">Maat</a> 
      </li> 
      <li> <a href="http://192.168.215.248/public/behandeling">Behandeling</a> 
      </li> 
     </ul> 
    </li> 
    <li class="menu_li"> <a href="http://192.168.215.248/public/bewaarplaatsen">Bewaarplaatsen</a> 
    </li> 
    <li class="menu_li"> <a href="http://192.168.215.248/public/proin">Product in</a> 
    </li> 
    <li class="menu_li"> <a href="http://192.168.215.248/public/proout">Product uit</a> 
    </li> 
    <li class="menu_li"> <a href="http://192.168.215.248/public/taken">Taken</a> 
    </li> 
    <li class="menu_li"> <a href="http://192.168.215.248/public/historie">Historie</a> 
    </li> 
</ul> 

J'ai la JS suivante:

$(function() { 
    var url = window.location.href.replace(/\/$/, ''); 
    console.log("url: " + url); 
    // now grab every link from the navigation 
    $('.menu_li a').each(function() { 
     console.log("this href: " + this.href); 
     if (this.href.indexOf(url) > 0) { 
      console.log("Hit!"); 
      $(this).parent().addClass('active'); 
     } 
    }); 

}); 

Disons que j'ai navigué à l'adresse suivante:

http://192.168.215.248/public/taken 

Alors je wan't d'ajouter la classe active sur cet élément:

<li class="menu_li"> <a href="http://192.168.215.248/public/taken">Taken</a></li> 

Mais cela ne se produira pas ... La sortie que je reçois est:

url: http://192.168.215.248/public/taken 
this href: http://192.168.215.248/public 
this href: 
this href: http://192.168.215.248/public/partijen/1 
this href: http://192.168.215.248/public/partijen/0 
this href: http://192.168.215.248/public/telers 
this href: http://192.168.215.248/public/handelshuis 
this href: http://192.168.215.248/public/ras 
this href: http://192.168.215.248/public/klasse 
this href: http://192.168.215.248/public/perceel 
this href: http://192.168.215.248/public/maat 
this href: http://192.168.215.248/public/behandeling 
this href: http://192.168.215.248/public/bewaarplaatsen 
this href: http://192.168.215.248/public/proin 
this href: http://192.168.215.248/public/proout 
this href: http://192.168.215.248/public/taken 
this href: http://192.168.215.248/public/historie 

Here's an JSFiddle

Comme vous pouvez le voir, je devrais obtenir un coup. La raison pour laquelle je ne suis pas vérifier avec if(url == hrefurl) est parce que l'URL de navigation peut aussi être:

http://192.168.215.248/public/taken/edit/200 
or 
http://192.168.215.248/public/taken/nieuw 

et ainsi de suite.

J'ai un sentiment que je dois faire quelque chose avec regex, mais je ne suis pas pro JS, et encore moins en regex ....

ne Alors quelqu'un sait comment je peux faire ce morceau de JS travaille-t-il?

Answer 1

La correspondance avec indexOf donne la sortie 0 si la chaîne est trouvée; d'autre -1,

de sorte que la condition doit être

if (this.href.indexOf(url) > -1) 

Updated Fiddle