Javascript Изменение класса выбранных элементов меню

Question

Предположим, что у меня есть такое меню

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

Теперь с помощью javascript, я хочу изменить выделенный, таким образом удалить «выделенный» из текущего и добавить к следующему

Что мне нужно, это сначала удалить класс из текущего выбранного, затем добавить к следующему.

Как этого достичь?

РЕДАКТИРОВАТЬ: я использую это для встроенной системы БЕЗ мыши или jquery, но мой единственный вариант - это дистанционное управление и простой javascript, так что вверх и вниз я не могу:

Answer 1

Использование javascript для этого было бы излишним в наше время.

Поскольку вы пометили этот css, могу ли я предложить следующий метод только для CSS, также известный как: hover pseudo-класс :

ul#leftMenu li:hover {
  color: red;
}

Answer 2

Если бы это был я, и я знал, что меню не были чудовищно огромными, я бы удалил класс из всех <li> элементов, а затем добавил его к тому, который хотел.

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, '');

Теперь о том, как вернуть класс обратно , это зависит от того, как вы нашли своего нового фаворита <li>. Если он находится в обработчике события, то объект события будет называть его «целью». Таким образом, вы просто добавили бы «selected» к имени класса.