Javascript Changing The Selected Menu Items Class

Assume that I have such menu

• Foo1
• Foo2
• Foo3
• Foo4&

Solution 1:

Using javascript for this would be an overkill in this day and age.

Since you tagged this css, may I suggest the following CSS-only method, also known as the :hover pseudo-class:

ul#leftMenuli:hover {
  color: red;
}

Solution 2:

If it were me, and I knew the menus weren't monstrously huge, I'd remove the class from all the <li> elements and then add it to the one I wanted.

var lis = document.getElementById('leftMenu').getElementsByTagName('li');
for (var i = 0; i < lis.length; ++i)
  lis[i].className = lis[i].className.replace(/\bselected\b/g, '');

Now, as to how to put the class back, well that depends on how you've found your new favorite <li>. If it's in an event handler, then the event object will refer to it as the "target". You'd thus just append "selected" to the class name.