Форум

IONEX · #1 (**permalink**) 09.01.2012, 00:19

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

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

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

Pavel M. · #2 (**permalink**) 09.01.2012, 11:45

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

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

IONEX · #3 (**permalink**) 09.01.2012, 16:42

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

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

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

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

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

или так:

$(this).toggleClass("active")

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

Pavel M. · #4 (**permalink**) 10.01.2012, 11:15

Сообщение от 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>

IONEX · #5 (**permalink**) 15.01.2012, 00:12

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

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

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

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

при тех же:

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

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

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

Pavel M. · #6 (**permalink**) 15.01.2012, 10:02

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

Форум

Справочник

Discord чат

Курсы javascript