更改li元素问题的css类

Question

我有以下结构:

<ul id='myTopicsList'>

<li> 
<a><span> First Element </span></a>
</li>

.....

</ul>

第一次加载页面时,将通过将其高亮显示为背景颜色蓝色来选择第一个li.

下次用户单击列表中的另一个元素时,它应该变为蓝色,其余元素应该具有白色背景.

我正在使用这个脚本:

function GetMyTopic(catID) {
 $('#myTopicsList li').each(function () {

        if ($(this).attr('id').indexOf(catID) > 0) {
            $(this).addClass('SideBarBoxliSelected');
        }
        else {
            $(this).addClass('SideBarBoxli');
        }
    });
}

这里的CSS:

.SideBarBoxli{margin-bottom:4px; background-color:#fafafa; height:22px; }
.SideBarBoxli:hover {background-color:#E3ECF8; cursor:pointer; }
.SideBarBoxliSelected{margin-bottom:4px; background-color:#6388BF; height:22px; }

当我单击并将SideBarBoxliSelected类分配给单击时li,背景保持不变.

有什么建议？

Answer 1

这是我要使用的html:

<ul id="myTopicsList">
    <li class="SideBarBoxli SideBarBoxliSelected">first</li>
    <li class="SideBarBoxli">sec</li>
    <li class="SideBarBoxli">three</li>
    <li class="SideBarBoxli">four</li>
    <li class="SideBarBoxli">fiffff</li>
</ul>

这是我将使用的代码:

$(document).ready(function() {
    $('ul#myTopicsList li').click(function() {
        $('li.SideBarBoxliSelected').removeClass('SideBarBoxliSelected');
        $(this).addClass('SideBarBoxliSelected');
    });
});

该.click函数将设置它,以便每当有人点击任何li项目时,它们将触发匿名函数,该函数SideBarBoxliSelected从当前所选项中删除该类并将其添加到所单击的项目.

编辑

您还可以添加以下内容以确保第一个项目SideBarBoxliSelected在页面加载时具有类:

$('ul#myTopicsList li:first').addClass('SideBarBoxliSelected');

上述线路将在$('ul#myTopicsList li').click通话前上线.