Показать сообщение отдельно
  #1 (permalink)  
Старый 09.01.2012, 00:19
Аспирант
Отправить личное сообщение для IONEX Посмотреть профиль Найти все сообщения от IONEX
 
Регистрация: 08.01.2012
Сообщений: 32

Сдание спрайт меню с использованием jquery
Доброго времени суток! Только начал изучать програмирование сайтов, поэтому буду благодарен за любую помощь.

Возникла задача создания горизонтального меню.

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">&lt;</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 по изменению стиля, что делаю не так?
Ответить с цитированием