Javascript-форум - Сдание спрайт меню с использованием jquery

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Сдание спрайт меню с использованием jquery (https://javascript.ru/forum/jquery/24650-sdanie-sprajjt-menyu-s-ispolzovaniem-jquery.html)

Сдание спрайт меню с использованием 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 по изменению стиля, что делаю не так?

обрабатывайте клики сразу на li

$('#horisontal-tabs li').click(function () {
    $(this).toggleClass('active unactive');
});

Про li как то не подумал, забыл про bubling(

А вот будет ли работать?

$(this).toggleClass('active unactive');

Может верней быдет как-то так: (просто смотрю в учебник, там запись вида toggleClass(class,swith), где swith это условие когда swith==true добавит класс к элементу и наоборот)

$(this).toggleClass("active",$(this).hasclass("una ctive"));

или так:

$(this).toggleClass("active")

У меня не один не заработал

Цитата:

Сообщение от IONEX

А вот будет ли работать?

$(this).toggleClass('active unactive');

у меня работает

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>demo</title>
	<script type='text/javascript' src='http://code.jquery.com/jquery-git.js'></script>

	<style type='text/css'>
		.red { color: red;}
		.blue { color: blue;}
	</style>

	<script type='text/javascript'>
		$(function(){
			$('li').click(function () {
				$(this).toggleClass('red blue');             
			});
		});
	</script>

</head>
<body>
	<ul>
		<li class="red">пункт 1</li>
		<li class="blue">пункт 2</li>
	</ul>
</body>
</html>

Спасибо, заработало!

Дело было в файле CSS, при задании фонового изображения.

было: ul#horisontal-tabs li {//задание фона}

изменил на: li {//задание фона}

при тех же:

.active {
border: 1px groove black;
background-position: 0px 0px;
}

.unactive {
background-position: -300px -80px;
border: 1px groove red;
}

После этого все заработало, хотя и не понял почему селектор не сработал...

видимо, дело в Специфичности селекторов
почитайте http://htmlbook.ru/samcss/kaskadirovanie
от заголовка Специфичность