比較URL字符串和菜單的字符串，然後使用jQuery

我有一個類似如下的URL添加類：比較URL字符串和菜單的字符串，然後使用jQuery

http://www.website.co.uk/en-us/aboutus/thegroup/test.aspx

我頁面上的UL李菜單：我有

<ul> 
    <li><a href="/aboutus/thegroup/test.aspx">Test</a></li> 
    <li>Hello</li> 
    <li>Bye</li> 
    <li>Something</li> 
    <li>Cars</li> 
</ul>

每個頁面上的菜單，並希望使用jquery來檢查該頁面上的即時消息。如果我然後使A/li大膽，以便用戶知道他們在頁面上。

我曾嘗試以下：

$(document).ready(function() { 
    if(window.location.href.indexOf("test")) // 
    { 
     alert("your url contains the name test"); 
    } 
});

但ID喜歡的事，不介入硬編碼的URL字符串的值。就好像用戶決定添加更多鏈接到UL/LI，jquery需要自動檢查鏈接和url，並向LI添加一個類（以便我可以設計它）。

希望有足夠的信息。

來源

2012-04-18 SOLDIER-OF-FORTUNE

CSS可以用於這些。 – Joberror 2012-04-18 10:31:22

真的嗎？照顧給我看？ – 2012-04-18 10:32:56

它相當長，但您可以查看此鏈接。 http://perishablepress.com/dynamic-body-class-id-php-wordpress/ – Joberror 2012-04-18 10:44:33

問題是因爲indexOf()方法返回-1未找到該值時。您需要檢查該值，而不是像當前那樣將結果強制爲布爾值。試試這個：

$(document).ready(function() { 
    var loc = window.location.href; 
    $("ul a").each(function() { 
     if (loc.indexOf($(this).attr("href")) != -1) { 
      $(this).addClass("current"); 
     } 
    }); 
});

您將需要做出選擇具體一點，像#menu a

來源

2012-04-18 10:25:47

感謝和applogies我的其他線程關閉。 – 2012-04-18 10:26:26

別擔心，很樂意幫忙。 – 2012-04-18 10:28:24

你更新了：P – 2012-04-18 10:30:49

This？

$('ul#menu a').each(function() { 
    if(window.location.href.indexOf($(this).attr('href')) !== -1) { 
     $(this).closest('li').addClass('yourClass'); 
    } 
});

我添加了一個ID menu您ul與其他ul s表示可能是在同一個頁面基本上區分你的菜單欄。也!== -1作爲indexOf返回-1，如果它無法找到參數中搜索的字符串。

來源

2012-04-18 10:25:15

你能寫下這樣做的描述，以便我下次學習嗎？ – 2012-04-18 10:26:00

@ sp-1986編輯我的回答:) – 2012-04-18 10:26:52

我希望我可以接受多於一個答案SO – 2012-04-18 12:18:39

$(document).ready(function() { 
    var liTest = $('ul > li'); // ' was missing 
    liTest.each(function() { 
    if(window.location.href == $('a', this).attr('href')) // 
    { 
     $(this).css('font-weight', 'bold'); 
     return; 
    } 
    }); 
});

來源

2012-04-18 10:26:08 thecodeparadox

indexOf返回-1如果字符串不包含：

(document).ready(function() { 
    if(window.location.href.indexOf("test") != -1) // 
    { 
     alert("your url contains the name test"); 
    } 
});

來源

2012-04-18 10:26:17 Alp

比較URL字符串和菜單的字符串，然後使用jQuery

回答

相關問題