JQuery將類添加到活動鏈接

我正在嘗試將active類添加到鏈接，但我無法使其工作。JQuery將類添加到活動鏈接

比方說，我有以下HTML：

<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>

而且我已經得到了以下JS：

$(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'); 
     } 
    }); 

});

比方說，我已經瀏覽到這個網址：

http://192.168.215.248/public/taken

然後我wan't到active類添加到該元件：

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

但是，這不會發生...輸出我得到的是：

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

正如你所看到的，我應該得到一個打擊。我不會跟if(url == hrefurl)檢查的原因是因爲導航網址也可以是：

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

等。

我有一種感覺，我必須做的正則表達式的東西，但我在JS無親，何況是在正則表達式....

所以沒有任何人知道我怎樣才能使這片JS工作？

來源

2014-07-09 Mathlight

與indexOf匹配時，如果找到字符串，則輸出爲0;其他-1，

這樣的條件應該是

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

Updated Fiddle

來源

2014-07-09 08:56:36

達姆，我是那麼近，卻又那麼遠...感謝您指出了這一點。你知道我怎樣才能使它與其他鏈接（'link_visiting_2和link_visiting_3'）？ – Mathlight

嘗試將它們傳遞給數組。並將'thishref'與數組內容匹配。 –

對不起，如果我不清楚。我不需要測試多個變量。但我訪問的網址可以是這樣的：'http：// 192.168.215.248/public/taken'，但也可以是這樣的：'http://192.168.215.248/public/taken/edit/200 '。在這兩種情況下，我都不想「激活」http：// 192.168.215.248/public/taken鏈接... – Mathlight

JQuery將類添加到活動鏈接

回答

相關問題