Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   нажатие на кнопки меню (https://javascript.ru/forum/dom-window/33367-nazhatie-na-knopki-menyu.html)

Margosham-k 20.11.2012 19:39

нажатие на кнопки меню
 
Здравствуйте уважаемые!=) Пишу к вам с вопросом, может кто поможет решить такую проблемку... Ситуация такая:
В меню все кнопочки имеют фон белого цвета. При нажатии на нужный пункт меню (активации) - фон кнопки меняется на серый. Но, при нажатии на другой пункт меню, предыдущая возвращала фон белый, а уже активная кнопочка становилась серой...

фуф) объяснила)) только вот понятно?!

Margarita 20.11.2012 19:51

в цсс написать класс, который делает фон серым и при нажатии снимать/ставить его
или вам код нужен?

Margarita 20.11.2012 19:54

по-быстрому на jquery:
$(".button").click(function() {
$(this).toggleClass("grey");
});


css:
.grey { background: grey; }

Margosham-k 20.11.2012 20:28

дело в том, что у меня там не кнопки..там пункты ul / li

в котором при наведении мышью меняется картинка и цвет=)а еще нужно сделать,чтобы при нажатии на эти пункты менялся цвет и оставался..или наоборот убирался, в зависимости от того на какой вкладке находишься на данный момент..воот(

<ul id="navMain">
				<li id="home" class="first"><a href="#"><img src="img/home_bl.png" 
				onmouseover="this.src='img/home.png'" onmouseout="this.src='img/home_bl.png'" border=0><span>главная</span></a></li>
				<li><a href="#"><img src="img/about_bl.png"
				onmouseover="this.src='img/about.png'" onmouseout="this.src='img/about_bl.png'" border=0><span>обо мне</span></a></li>
				<li><a href="#"><img src="img/contacts_bl.png"
				onmouseover="this.src='img/contacts.png'" onmouseout="this.src='img/contacts_bl.png'" border=0><span>контакты</span></a></li>
				<li><a href="#"><img src="img/work_bl.png"
				onmouseover="this.src='img/work.png'" onmouseout="this.src='img/work_bl.png'" border=0><span>галерея</span></a></li>
				<li><a href="#"><img src="img/search_bl.png"
				onmouseover="this.src='img/search.png'" onmouseout="this.src='img/search_bl.png'" border=0><span>найдемся?</span></a></li>
				<li class="last"><a href="#"><img src="img/mail_bl.png"
				onmouseover="this.src='img/mail.png'" onmouseout="this.src='img/mail_bl.png'" border=0><span>напишем?</span></a></li>
			</ul>

Sanda 21.11.2012 18:12

Возможно, это подойдёт?
$('li').click(
    function (evt) {
        $('#navMain').find('li').removeClass('grey');
        $(evt.currentTarget).addClass('grey');
    }
);

Первой строчкой убираем серый цвет со всех пунктов меню, дальше навешиваем на тот, по которому кликнули.

Margosham-k 21.11.2012 20:54

спасибо большое.. правда все добавила..в файл с js и сss файл прописала этот класс..но все-равно не работает.. вроде все ясно и вроде все корректно,а не работает.(

Sanda 22.11.2012 01:05

Можно обернуть внешнюю и внутреннюю функцию в try/catch и alert-ить ошибки, чтобы понять, что происходит. Либо посмотреть в firebug, если он есть. Возможно, на странице просто отсутствует jQuery.

Margosham-k 22.11.2012 14:02

jQ подключена, спасибо больше=) буду разбираться)


Часовой пояс GMT +3, время: 12:56.