Javascript

Question

我在 bootstrap 页面的 HTML 中有一个侧边栏项目列表，我希望最后单击的项目用 "active" class 突出显示。我想知道如何获得像数组一样的整个列表 (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 项中删除活动 class，并将活动 class 添加到当前单击的 li 项。

干杯，

编辑PS:

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

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

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

编辑：

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

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

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

Javascript - 如何高亮最后点击的列表项

Javascript - How to highlight the last clicked list item

html

css

list

twitter-bootstrap