jQuery sibling 标签 "a"

Question

看起来很简单，但我找不到它不起作用的原因。当我单击其中一个标签时，我只是尝试“removeClass”其余 sibling “a”标签的 sibling 。我做错了什么？提前致谢。

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

Answer 1

您只需从所有 anchor 中删除类 active 并将其添加到当前单击的 anchor :

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

<强> Fiddle Demo