JS: Specifying current element in the menu

Question

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

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.