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

Question

I have a sidebar list of items in HTML on a bootstrap page and i would like the last clicked item to be highlighted with a "active" class. I was wondering how i can get the whole list (ul) like an array so i could highlight a certain item (li) or highlight the last clicked item.

The list is structured like this:

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

What i need is some JS code which can set the last clicked li item to class="active" but still have the option to set any of the li items to the active one, for example if i wanted to have a random button and it selected item 4 then 2 etc. I guess the main thing i need is a way to have all list items like an array.

Answer 1

I strongly suggest you use jQuery which is kind of simulating DOM manipulation like an array or more precisely an object.

My suggestion would be the following:

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

This code is removing the active class from all li items, and adding active class to currently clicked li item.

Cheers,

Edit PS:

You could also bind your event directly like this:

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

But the purpose of using .on() is that it will bind the event dynamically, so that if you decide to add a new li to your $(".nav-sidebar") element, it will also trigger the event on that element.

Edit:

To answer @zeddex your question: How to select manually li 4? You simply use the following:

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

That'll manually trigger a click event for li 4. If you want to select a specific li you can use a method of the like: :eq(x) in which x is the position of the li item you want to reach starting from 0 which corresponds to your first li . Have a look at jQuery DOC on that: jQuery DOC on :eq()