javascript - 使用 JavaScript 更改列表样式的 onclick

Question

我正在尝试更改单击时列表元素的样式，使其具有黑色背景和白色文本。当我单击另一个时，我希望它返回到白色背景和黑色文本的基本状态。我遇到的问题是当我单击第二个列表元素时，第一个元素保留了 JS 中生成的样式。这不是我想要的。

这是 HTML:

<ul class="menu">
    <li>
        <a href="#">Item One</a>
    </li>
    <li>
        <a href="#">Item Two</a>
    </li>
</ul>

这是 JS

$('.menu > li > a').click(function(){
    $(this).css({
        'background-color': 'black', 
        'color': 'white'
    });
    $(this).siblings('.menu > li > a').css({
        'background-color': 'white', 
        'color':'black'
    });
});

我知道我可能只是瞄准了错误的目标并且我尝试了多种方法，但我似乎无法弄清楚。我想我也混淆了父树、子树和兄弟树。非常感谢任何帮助!

这里是JSFiddle

Answer 1

您的选择器不正确尝试:

$(this).closest('li').siblings().find('> a').css({
    'background-color': 'white', 
    'color': 'black'
});

或者更确切地说，将它链接起来。

 $(this).css({
        'background-color': 'black', 
        'color': 'white'
    }).closest('li').siblings().find('> a').css({
        'background-color': 'white', 
        'color': 'black'
    });

Fiddle

在您的代码中，当您执行 $(this).siblings('.menu > li > a') 时，其中 this 是 anchor 标记，没有带有 .菜单类。相反，您想转到其父级的 sibling 并重置其直系后代的 anchor 标记。

• > closest()
• > siblings()

因为您是在元素上设置样式，所以它优先于您为悬停定义的 css 属性。所以切换回类并试试这个:

CSS

.menu li > a.active{
    background-color: #000; 
    color: #fff;    
}

JS

$('.menu li > a').click(function(){
    $(this).addClass('active').closest('li').siblings().find('> a.active').removeClass('active');
});

或者只是

$('.menu li > a').click(function(){
    var $this =  $(this);
    $this.closest('.menu').find('a.active').not($this.addClass('active')).removeClass('active');
})

Fiddle