Javascript - 如何突出显示上次单击的列表项

Javascript - How to highlight the last clicked list item

本文关键字：单击 列表 何突出 显示 Javascript      更新时间：2023-09-26

我在引导页面上有一个 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等。我想我需要的主要事情是一种将所有列表项都像数组一样的方法。

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

我的建议如下：

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

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

干杯

编辑附注：

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

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

但是使用 .on() 的目的是它将动态绑定事件，因此，如果您决定向 $(".nav-sidebar") 元素添加新的 li，它也将在该元素上触发事件。

编辑：

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

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

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

相关文章：