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是锚标记时，没有.menu类的兄弟。相反，你想去其父级的兄弟姐妹，并重置他们的直系后代的锚标签。

您在元素上设置样式时，它优先于您为悬停定义的css属性。 SO切换回课程并试试这个：

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

Answer 2

这将完成您的目标，如果在被选中后再次点击该行，也会取消选择（恢复为基色）。

jQuery的：

$('.menu li > a').click(function() {

    if($(this).hasClass('active') == true) {
        $(this).removeClass('active');
    }
    else {
        $('li > a.active').removeClass('active');
        $(this).addClass('active');
    }
});

CSS：

.menu li a {
    background-color: #FFF;
    color: #000;
}
.menu li a.active {
    background-color: #000;
    color: #FFF;
}
.menu li a:hover {
    background-color: #000;
    color: #FFF;
}

干杯 - Fiddle（我借了部分@PSL小提琴）

Answer 3

试试这个

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

Answer 4

请参阅this working jsFiddle

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

使用JavaScript更改列表样式onclick

4 个答案: