Question

看起来很简单，但我找不到它为什么不起作用。当我点击其中一个时，我只是试图“删除其余的兄弟姐妹”的兄弟姐妹的“删除类”。我做错了什么？提前致谢。

CSS -------＆gt;

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

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

HTML -------＆GT;

<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 -------＆gt;

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

Answer 1

您只需要从所有锚中删除类active并将其添加到当前单击的锚点：

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

<强> Fiddle Demo

Answer 2

在你的JS中执行此操作

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

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

Answer 3

使用：

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

Answer 4

尝试简单的方法：

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");
});

jQuery兄弟姐妹标记“a”

4 个答案: