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()

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

1 个答案: