Доброго времени суток! Только начал изучать програмирование сайтов, поэтому буду благодарен за любую помощь.
Возникла задача создания горизонтального меню.
1 Создал PSD макет необходимого мне меню, картинка готова.
2 В HTML создал менюшку:
Код:
|
<!-- -------------------------------------------------------------- -->
<!-- КОНТЕНТ -->
<!-- -------------------------------------------------------------- -->
<div id="content">
<!-- ----------------------Горизонтальное меню--------------------- -->
<ul id="horisontal-tabs">
<li id="home" class="active">
<a href="#main" class="tabs_link">Главная страница</a>
</li>
<li id="home" class="active" title="tabs_list">
<a href="#main" class="tabs_list" title="main"><</a>
</li>
<li id="works" class="unactive">
<a href="#works" class="tabs_link" title="works">Выполненные работы</a>
</li>
<li id="current-works" class="unactive">
<a href="#current_works" class="tabs_link" title="Current_works">Текущие работы</a>
</li>
<li id="publications" class="unactive">
<a href="#publications" class="tabs_link" title="Publications">Публикации</a>
</li>
</ul>
<!-- -------------------------------------------------------------- -->
</div>
<!-- -------------------------------------------------------------- --> |
Соответсвенно class для li может быть active или unactive (делаю для заднаия стиля ссылки внутри li активному и неактивным пунктам меню)
3 Код css
Код:
|
li.active a{
background-position: -310px -42px;
}
li.unactive a{
background-position: 0px -42px;
} |
4 C использованием Jquery хочу чтобы при клике на ссылку соответсвующего пункта меню изменялся класс ее родителя на противоположный
<script language="javascript">
$(document).ready( function () {
$('a').click('click',click_tabs);
});
function click_tabs (eventObj) {
$('a').parents.filter('*[class=active]').toggleClass('unactive');
$('eventObj.target').parents.toggleClass('active');
}
</script>
$('a').parents.filter('*[class=active]').toggleClass('unactive'); - Хочу добиться чтобы текущий активный пункт меню стал неактивным
$('eventObj.target').parents.toggleClass('active') ; - делаю активным пункт меню по которому был совершен клик
Не получается добиться изменения background по изменению стиля, что делаю не так?