0

我正在尝试更改单击时列表元素的样式，使其具有黑色背景和白色文本。当我单击另一个时，我希望它返回到白色背景和黑色文本的基本状态。我遇到的问题是当我单击第二个列表元素时，第一个保留了 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

4

4 回答 4

4

您的选择器不正确尝试：

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

小提琴

在您的代码中，当您执行$(this).siblings('.menu > li > a')where thisis anchor 标签时，没有 .menu 类的兄弟姐妹。相反，您想去其父级的兄弟姐妹并重置其直系后代的锚标记。

因为您在元素上设置样式，所以它优先于您为悬停定义的 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');
})

小提琴

于 2013-09-18T01:09:19.170 回答
1

这将实现您的目标，并且如果在选择后再次单击该行，还将取消选择（恢复为基本颜色）行。

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

干杯 -小提琴（对不起，我借了@PSL小提琴的一部分）

于 2013-09-18T01:25:15.077 回答
0

尝试这个

$('.menu li > a').click(function(){  
    $('.menu li > a').css({
        'background-color': 'white', 
        'color': 'black'
    });
      $(this).css({
        'background-color': 'black', 
        'color': 'white'
    });
});
于 2013-09-18T01:09:36.267 回答
0

看到这个工作 jsFiddle

$('.menu li a').click(function(){
    $(this).css({
        'background-color': 'black', 
        'color': 'white'
    });
    $(this).parent().siblings().find('a').css({
        'background-color': 'white', 
        'color': 'black'
    });
});
于 2013-09-18T01:09:43.867 回答