Question

我有一个无序列表，我想在选择该项目时更改每个项目的背景颜色（列表中的项目是链接标记）这里是我到目前为止的JQuery代码。

$("#cat").focusin(function(){
    $("#cat").css("background-color", "#1796cf");
});

$("#cat").focusout(function(){
    $(this).css("background-color", "#333333");
});

#cat在html中为我列表中的每个项目设置为ID。这可以工作，但只适用于无序列表中的第一项。请帮助我对列表中的每个项目进行处理。

Answer 1

ID应该是唯一的使用class代替id

$(".cat").focusin(function(){
    $(this).css("background-color", "#1796cf");
});

$(".cat").focusout(function(){
    $(this).css("background-color", "#333333");
});

Answer 2

尝试其他方式

$('.cat').focus(function() {
       $(this).css("background-color", "#1796cf");
    }).blur(function() {
        $(this).css("background-color", "#333333");
 });

Answer 3

好的评论之后我已经重新做出了回答，以下是您需要做的事情：

<强> HTML ：

<ul class="selectable">
    <li><a href="#">text</a></li>
    <li><a href="#">text</a></li>
    <li><a href="#">text</a></li>
</ul>

<强> CSS ：

.selectable li {
    background-color: #333;
}

.selectable li.cat {
    background-color: #1796cf;
}

.selectable li a {
    color: white;
}

.selectable > li > a {
    display: block;
}

最后一些 JQuery 来做魔术：

$('.selectable > li > a').click( function( e ) {
    //prevent click from anchors, you can avoid this step if you need them
    e.preventDefault();
    //look for any previous class asigned
    $('.selectable').find('li').removeClass('cat');
    //add class to the li
    $(this).parent().addClass('cat');
});

链接到更新的fiddle

JQuery改变无序列表项的背景颜色

3 个答案: