jQuery兄弟姐妹標記「a」

看起來很簡單，但我找不到爲什麼它不起作用。當我點擊其中一個兄弟姐妹時，我只試圖「移除」其餘兄弟姐妹「a」的兄弟姐妹的「標籤」。我做錯了什麼？提前致謝。jQuery兄弟姐妹標記「a」

CSS ------->

.navigation li a{ 
    display: block; 
    padding: 10px; 
    text-decoration: none; 
    color: #544539; 
    font-size: 18px; 
    background: #FFFFFF; 
} 

a.selected { 
    background: #003662; 
    color: #ffffff; 
}

HTML ------->

<nav class="navigation"> 
    <ul> 
     <li><a href="#" title="home">Home</a></li> 
     <li><a href="#" title="collect">Collect</a></li> 
     <li><a href="#" title="spend">Spend</a></li> 
     <li><a href="#" title="about">About Us</a></li> 
    </ul> 
</nav>

的jQuery ------->

$(".navigation a").on("click", function() {        
    $(this).addClass("selected"); 
    $(this).siblings().removeClass("selected"); 
});

來源

2014-02-21 renzo

給出的答案是正確的，但要解釋爲什麼。你的目標是'a'元素，它沒有兄弟姐妹，它是父親，'li'，有兄弟姐妹，而兄弟姐妹又有一個子元素，你正在尋找的'a'。 – timo

感謝您的解釋。我以爲我沒有這樣看。 – renzo

使用：

$(this).parent().siblings().find('a').removeClass("selected");//remove class from sibling a tags 
$(this).addClass("selected");//and then add class to current a tag

你也可以使用：

$('.selected').removeClass("selected"); 
$(this).addClass("selected");

來源

2014-02-21 09:37:19

你只需要從所有錨卸下active類，並把它添加到當前點擊主播：

$(".navigation a").on("click", function() {        
    $('.navigation a').removeClass("selected"); 
    $(this).addClass("selected"); 
});

Fiddle Demo

來源

2014-02-21 09:38:05 Felix

嘗試簡單的方法：

http://jsfiddle.net/aamir/fWKsV/

更改CSS來：

li.selected a { 
    background: #003662; 
    color: #ffffff; 
}

的jQuery：

$(".navigation a").on("click", function() {        
    var $li = $(this).closest('li'); 
    $li.addClass('selected') 
    $li.siblings().removeClass("selected"); 
});

來源

2014-02-21 09:48:41

做到這一點在你的JS

$(".navigation a").on("click", function() {        
    $(this).addClass("selected"); 
    $(this).siblings().removeClass("selected"); 
});

http://jsfiddle.net/mahavir4dev/v9LGY/

來源

2014-02-21 09:53:36 Andolasoft

jQuery兄弟姐妹標記「a」

回答

相關問題