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

Question

我在 Bootstrap 页面上有一个 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:

您还可以像这样直接绑定(bind)事件:

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

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

编辑:

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

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

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