Javascript - 如何突出显示最后点击的列表项

Question

我在引导页面上有一个 HTML 项目的侧边栏列表，我希望最后点击的项目用“活动”类突出显示。我想知道如何像数组一样获取整个列表 (ul)，以便突出显示某个项目 (li) 或突出显示最后点击的项目。

列表的结构如下：

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-2 sidebar sidebar-style">
      <ul class="nav nav-sidebar sidebar-scrollable">
        <li class="active"><a href="#" onclick="jump(0)">Home</a></li>
        <li><a href="#" onclick="jump(1)">Site 001</a></li>
        <li><a href="#" onclick="jump(2)">Site 002</a></li>
        <li><a href="#" onclick="jump(3)">Site 003</a></li>
        <li><a href="#" onclick="jump(4)">Site 004</a></li>
        <li><a href="#" onclick="jump(5)">Site 005</a></li>

我需要的是一些 JS 代码，它可以将最后点击的 li 项目设置为 class="active" 但仍然可以选择将任何 li 项目设置为活动项目，例如，如果我想要随机按钮，然后它选择了第 4 项，然后选择了 2 等。我想我需要的主要是一种让所有列表项像数组一样的方法。

Answer 1

我强烈建议您使用 jQuery，它可以模拟 DOM 操作，如数组或更准确地说是对象。

我的建议如下：

$(".nav-sidebar").on('click', 'li', function(e) {
    $(this).parent().find('li.active').removeClass('active');
    $(this).addClass('active');
});

此代码正在从所有li 项目中删除活动类，并将活动类添加到当前单击的li 项目。

干杯，

编辑 PS：

你也可以像这样直接绑定你的事件：

$(".nav-sidebar li").click(...);

但是使用.on() 的目的是动态绑定事件，这样如果你决定给$(".nav-sidebar") 元素添加一个新的li，它也会触发那个元素上的事件。

编辑：

回答@zeddex 你的问题：如何手动选择li 4？ 您只需使用以下内容：

$("li:eq(3)").trigger('click');

这将手动触发 li 4 的点击事件。如果要选择特定的 li，可以使用类似的方法：:eq(x) 其中x 是您想要的 li 项目的位置从0 开始到达，这对应于您的第一个li。看看 jQuery DOC：jQuery DOC on :eq()