How do I find out which list item was selected?

Question

I am trying to find out which exact list item was selected in the navigation menu. With this information, I will remove the class active from the previous menu link and add it to the newly selected one.

<ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="#pageOne">Home</a></li>
      <li><a href="#pageTwo">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
</ul>

JavaScript:

let menuClick = document.getElementsByClassName(".nav");
menuClick.addEventListener('click', changeActive(), false);

function changeActive(){
     //enter code here
}

Andy · Answer 1 · 2015-12-24T21:18:16.827

Get the first element of the nodelist for nav:

let menuClick = document.getElementsByClassName("nav")[0];

Attach an event listener (note: changeActive not changeActive()). This will use event delegation to catch the events that bubble up from the anchors.

menuClick.addEventListener('click', changeActive, false);

Now add some code to your function:

function changeActive(e){

  // grab the element that's active
  let active = this.querySelector('li.active');

  // remove the class
  active.classList.remove('active');

  // add the active class to the parent of the clicked anchor
  e.target.parentNode.classList.add('active');
}

DEMO

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

Using

Vanilla JS - DEMO

var menuItems = document.querySelectorAll(".nav a"); // Get all matching selectors; same as SizzleJS $(selector) 
 
for(var i=0; i < menuItems.length; i++){ // Loop through each element and add click event listener 

         menuItems[i].addEventListener('click', function(event){ // adding event listener.
           event.preventDefault();
           for(var i=0; i < menuItems.length; i++){
              menuItems[i].parentElement.className = ''; // remove current `active` class from parent element `li`. This is not the best approach for removing classes in Vanilla JavaScript; see this answer http://stackoverflow.com/a/2155786/2151050
           }
           this.parentElement.className = 'active'; // add `active` to current clicked element.
         }, false);

}

I am not going to force you to use jQuery, but you should consider it for doing more, and writing less code. :). Here's the jQuery version

jQuery - DEMO

var menuItems = $(".nav a");
$(".nav a").on('click', function(event) {
    event.preventDefault();
    menuItems.parent().removeClass('active');
    $(this).parent().addClass('active');
});

Because the `href`attribute is set to `#`, so `event.preventDefault()` prevents the jumping effect when clicked. — Adam Azad, Dec 25 '15 at 13:27

score 0 · Answer 3 · edited Aug 22 '22 at 08:02

There is many way to do that:

You can use onhashchange to detect hash changes

function locationHashChanged() { if(location.hash === "#pageOne") { // do something } else if(location.hash === "#pageTwo") { // do something } } window.onhashchange = locationHashChanged;

Or simply can bind click event to menu items

HTML:

<ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="#pageOne">Home</a></li>
      <li><a href="#pageTwo">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
</ul>

JS:

var navs = document.querySelectorAll('.nav a');
navs.click = function (e) {
  document.querySelector('active').className.replace('active','');
  var target = e.target;
  taret.className += ' active';
};

score -1 · Answer 4 · answered Dec 24 '15 at 20:52

here is way a way with javascript..Note you will have to loop to add a click handler to all objects in the menu.

here is a snippet

function click(e){
alert(e.target.innerHTML);
}
var el=document.getElementsByClassName('nav navbar-nav navbar-right')
for(var i=0;i<el.length;++i){
function t(i){
el[i].addEventListener('click',click,false)
}
t(i)
}

<ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="#pageOne">Home</a></li>
      <li><a href="#pageTwo">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
</ul>

How do I find out which list item was selected?

4 Answers4

Vanilla JS - DEMO

jQuery - DEMO