Javascript Changing the selected Menu items class

Question

Hello, Assume that I have such menu

<ul id="leftMenu">
    <li class="selected">Foo1</li>
    <li>Foo2</li>
    <li>Foo3</li>
    <li>Foo4</li>
    <li>Foo5</li>
    <li>Foo6</li>             
</ul>

Now via javascript, I want to change the highlighted one thus remove the "selected" from the current one and add to the next one

What I need is, first remove the class from the currently selected one, than add to the next.

How can this be achieved?

EDIT: I use this for an embedded system WITHOUT mouse or jquery but remote control and plain javascript so up and down are my only options, no hover allowed :S

Answer 1

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.

Answer 2

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#leftMenu li:hover {
  color: red;
}