Изменение стиля при щелчке на тэг <a>

[R41f]

Имеется данный html-код:
[HTML]
<div class='tabs'>
<div id='tab0'>Контент 1</div>
<div id='tab1'>Контент 2</div>
<div id='tab2'>Контент 3</div>
</div>

<div class='tabs'>
<ul class='tabNavigation'>
<li><a href='#tab0'>Меню 1</a></li>
<li><a href='#tab1'>Меню 2</a></li>
<li><a href='#tab2'>Меню 3</a></li>
</ul>
</div>
[/HTML]
Вообще идея - переключение табов в верхней части кода. Нашел реализацию через jQuery:

Код: Выделить всё

  <script type='text/javascript'>
    $(function () {
      var tabContainers = $('div.tabs > div');
      tabContainers.hide().filter(':first').show();
      $('div.tabs ul.tabNavigation a').click(function () {
        tabContainers.hide();
        tabContainers.filter(this.hash).show();
        $('div.tabs ul.tabNavigation a').removeClass('hover');
        $(this).addClass('hover');
        return false;
      }).filter(':first').click();
    });
  </script>

Строка

Код: Выделить всё

$(this).addClass('hover'); 

добавляет класс hover к ссылке, по которой произвели щелчок. Мне же нужно, чтобы данный класс добавлялся к элементу списка li. Я никак не могу придумать, как это сделать. Вариант:

Код: Выделить всё

...
      $('div.tabs ul.tabNavigation li').click(function () {
...
        $('div.tabs ul.tabNavigation li').removeClass('hover');
        $(this).addClass('hover');
...
 

нежизнеспособен (класс-то применяется, да табы не переключаются).
Вариант:

Код: Выделить всё

$(div.tabs ul.tabNavigation li).addClass('hover');
 

вполне логично применяет класс hover ко всем элементам списка, а не к текущему.

Я в js не силен, нашел такой скрипт:

Код: Выделить всё

<script language="javascript" type="text/javascript">
 function setClass(classname) 
 {
   document.getElementById('tabNavigation').setAttribute('class', classname);
 }
</script>

и элемент списка должен выглядеть как-то так:
[HTML]
<li onclick="setClass('hover'); return false;"><a href='#tab0'>Меню 1</a></li>
[/HTML]
Но проблема в том, что такой скрипт по нажатию на а не добавит класс hover к li, нужно жать на li. А по нажатию на li не раскроется таб.

Помогите пожалуйста разрешить вопрос с jQuery либо приведите скрипт на js, который бы добавлял по щелчку класс hover к элементу списка и удалял бы этот класс со всех других элементов. Спасибо.

[Duncon]

Дети изучайте DOM подобные задачи решаются 2 строчками кода, без громоздких сторонних библиотек.