Сдание спрайт меню с использованием jquery
Доброго времени суток! Только начал изучать програмирование сайтов, поэтому буду благодарен за любую помощь.
Возникла задача создания горизонтального меню. 1 Создал PSD макет необходимого мне меню, картинка готова. 2 В HTML создал менюшку: Код:
<!-- -------------------------------------------------------------- -->3 Код css Код:
li.active a{
<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") У меня не один не заработал |
Цитата:
<!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 от заголовка Специфичность |
| Часовой пояс GMT +3, время: 05:23. |