基於HREF值切換父元素的類jQuery

正如你可能會告訴我今天正在學習jQuery（以及其他網站的東西）。基於HREF值切換父元素的類jQuery

我想整齊地將LI的類改爲活動，當我有一個變量與LI中的A上的HREF的內容相匹配時。

它的結構如下：

<li><a href="foo.html">Foo</a></li>

當我的「頁面」變量等於「foo.html」我要的類裏的改變爲主動。具體如下：

<li class="active"><a href="foo.html">Foo</a></li>

我知道有這樣做的適度簡單的方法，但我做的方式似乎是完全錯誤的！

正如一個側面說明，這是值得銘記（因爲這是我已翻倒），這是一個菜單，以及衆多LIS例如有：

<li class="active"><a href="foo.html">Foo</a></li> 
<li><a href="bar.html">Bar</a></li>

非常感謝，克里斯

來源

2013-04-16 Kris Douglas

你可以更新你的代碼嗎？對我們而言，這比您更願意發佈解決方案。 – Snuffleupagus

這應該工作：

：

$('a[href="foo.html"]').closest("li").addClass("active");

要與你的頁面變量工作

$('a[href="' + hrefVariable + '"]').closest("li").addClass("active");

編輯：

爲了解釋這是如何工作：

第一部分，$（ 'A [HREF = 「foo.html」]'）將找到任何和所有鏈接在頁面上使用foo.html的href值。
第二個對象.closest（「li」）將找到與第一部分中找到的元素最接近的li。
第三個對象將該類添加到前面的元素中，在這種情況下是li。

來源

2013-04-16 16:16:01

這很好，謝謝:)什麼是正確的方式來使用「foo.html」在那裏的變量，我試圖連接它，但它扔了。 –

你讀了我的心，非常感謝！ –

它可以幫助OP解釋爲什麼這也適用 – cfs

第1步：獲取正確的鏈接元素

首先，你需要找到正確的a標籤元素，你可以做到這一點與以下attribute selector：

var href = "foo.html"; 
var a = $("[href='" + href + "']");

步驟2：獲取父列表項元素

然後你可以使用parent()功能找到直接父：

var li = a.parent();

如果它不是一個直接的父母，你可以使用closest()功能，可以讓你發現，所提供的選擇相匹配的始祖。例如：

var li = a.closest("li");

第3步：

li.addClass("active");

如果您：更改類

最後，你可以一類使用addClass()功能添加到任何給定的元素需要在任何時候刪除班級，或刪除現有班級，則可以使用removeClass()功能：

li.removeClass("active");

注意：如果你想 '重置' 所有活動列表元素，你可以很容易地做到以下幾點：

$("li.active").removeClass("active");

最終的結果

Here is a working example in action

來源

2013-04-16 16:18:00 musefan

雖然你沒有在你的問題中指定它，但我想你會想要rem從其他LIs中選擇活躍課程？

var li = $('.menuClass li'), // menuClass is whatever the class of your menu is (or #menuId for id) 
    page = 'foo.html'; 

li.each(function() { 
    var t = $(this); // better performance 
    t.removeClass('active'); // remove active class from all 
    if (t.find('a').attr('href') === page) { // if the href equals the value of your page variable, add active class 
     t.addClass('active'); 
    } 
});

來源

2013-04-16 16:29:42

基於HREF值切換父元素的類jQuery

回答

相關問題