jquery - 更改 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 调用之前。

---