JS: Specifying current element in the menu

Question

Hi!

I have a menu:

 <ul>
    <li id="active"><a href="/">Головна</a></li>
     <li><a href="/about/">Про компанію</a></li>
     <li><a href="/work/">Діяльність</a></li>
     <li><a href="/initiative/">Ініціативи</a></li>
     <li><a href="/statti/">Статті</a></li>
 </ul>

Can you suggest a way to change id=active attribute for this list. If for example I clicked on about, I want this li element to be marked as active.

Thanks

Answer 1

Use class, not id. The reason is that id is for identifying elements, which in this case would mean that the only element in the page identified by "active" would be this one, even if you have other contexts needing an "actiuve" distinction. Using class lets you have several "active" elements in different context, and is more semantically correct.

Answer 2

To be correct, you should use class, not id to do this. (See http://css-discuss.incutio.com/?page=ClassesVsIds for more explanation. Basically ids should be unique to the page.)

You can modify the class using jQuery's built in attribute modifying functions: http://docs.jquery.com/Attributes

Look under "Class"

Answer 3

If your menu had an id, let's say "xpto", the onclick of each link could trigger a function like this:

onclick="setActiveId(this);"


functionSetActiveId(newActiveElem){
  var allElems = document.getElementById('xpto').childNodes;

  for(var i = 0; i < allElems.length; i++){
    allElems[i].id = '';
  }

  newActiveElem.id = 'active';
}

Answer 4

There is an elegant css method of styling the currently active navigation state without any javascript or server side support. Basically one id (e.g. as body id attribute) that uniquely identifies the navigation state is enough to create css selectors that highlight the active state.