Сделать пункт меню активным (поменять внешний вид) - JavaScript, Ajax

mutabor · 02.01.2011, 17:40

Есть меню, активный пункт отличается от неактивного нижней границей и цветом фона. Классы написал, но т.к. давно не использовал JS (да и не сильно я его юзал много).

Это меню

PHP код:


			
<ul>

    <li><a class="item item-inactive" href="#">Rooms</a></li>

    <li><a class="item item-inactive" href="#">Staff</a></li>

    <li><a class="item item-active" href="#">Pupils</a></li>

    <li><a class="item item-inactive" href="#">School structure</a></li>

    <li><a class="item item-inactive" href="#">Settings</a></li>

</ul>

Это классы

Код HTML:

.item {
	font-size: 11px;
	font-weight: bold;
	color: #fffffa;
	text-decoration: none;
	padding: 4px 10px;
	margin-right: 3px;
}
.item-active {
	background: #8B9BA8;
	border-bottom: 3px solid #8B9BA8;
}
.item-inactive {
	background: #b1b4bd;
}

Как написать скрипт, чтобы снимал выделение с активного, и задавал новому пункту при клике?

Я так понял, нужно делать поиск элемента с классом item-active и менять класс этому элементу на item-inactive. А тому, по к-рому был клик, наоборот. Вот только с реализацией проблема у меня

InternetStranger · 02.01.2011, 20:02

Вот возможная реализация, правда с применением jQuery

Не очень оптимизировано, конечно, зато самая простая реализация.

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
	<title>Мутабору</title>
    
    <style type="text/css">
        .item {
        	font-size: 11px;
        	font-weight: bold;
        	color: #000;
        	text-decoration: none;
        	padding: 4px 10px;
        	margin-right: 3px;
        }
        .item-active {
        	background: #8B9BA8;
        	border-bottom: 3px solid #8B9BA8;
        }
        .item-inactive {
        	background: #b1b4bd;
        }
    </style>
    
    <!-- Подгружаем jQuery c Яндекса. Она у 70-90% пользователей уже закэширована в браузере -->
    <script src="//yandex.st/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    
    <script type="text/javascript">
        $(function(){   // Обработчик - после загрузки документа... 
        
            $('ul#mylist>li>a').click(function(){
                $('ul#mylist>li>a').removeClass('item-active').addClass('item-inactive');  // У всех ссылок срезаем класс активности, и всем присваиваем класс неактивности
                $(this).removeClass('item-inactive').addClass('item-active');           // И т/о данной ссылке установим класс активности 
                return false; // Отменить стандартное поведение ссылок -> т.е. ссылки перестанут быть таковыми, а станут рядовыми элементами DOM (м/о закоменнтить)
            });
            
        });
    </script>
</head>

<body>
    
<ul id="mylist">
    <li><a class="item item-inactive" href="#">Rooms</a></li>
    <li><a class="item item-inactive" href="#">Staff</a></li>
    <li><a class="item item-active" href="#">Pupils</a></li>
    <li><a class="item item-inactive" href="#">School structure</a></li>
    <li><a class="item item-inactive" href="#">Settings</a></li>
</ul>  

</body>
</html>

mutabor · 04.01.2011, 13:03

Сделал уже на чистом js.

По этому поводу у меня еще вопрос теоретического характера появился: почему цикл for in выполняется намного раз больше, чем есть дочерних элементов? Например для списка <ul> с пятью <li>, итератор цикла принимает следующие значения:
0 1 2 3 4 5 6 7 8 9 10 length item
А длина (length) массива: 11. Вместо ожидаемых пяти.

Хотя работает все как надо. Я меняю в цикле класс элементам. Куда же идет запись для остальных шести???

InternetStranger · 04.01.2011, 17:34

А полный код можно посмотреть?

ps: вышеприведенный код (с подключением jQuery) вопреки господствующему мнению приводит к увеличению загружаемого трафика всего на+24Kb и увеличению времени загрузки + (50-200ms).

pss: не могу отредактировать сообщение #2. Оно ведь мной вроде написано? )) Кнопка "Правка" нету и всё ) Мистика

mutabor · 04.01.2011, 20:31

PHP код:


			
        function menu2click(event) {

            var i;

            var items=document.getElementById("second-menu").childNodes[1].childNodes;

            for (i in items) items[i].className="item-inactive";

            event.target.className="item-active";

        }

У меня предубеждений нет по поводу jQuery. Мне как-то все равно

Да и я не себе делаю.

Этот способ работает, проблемы никакой нет. Просто интересно как цикл работает, почему через один индексы элементов идут (1,3,5 и т.д., я проверил уже). А что находится под индексами 2,4,6? Причем className туда успешно записывается.

Пепел Феникса · 04.01.2011, 22:05

Цитата:

pss: не могу отредактировать сообщение #2. Оно ведь мной вроде написано? )) Кнопка "Правка" нету и всё ) Мистика

давно создано сообщение, так что мистикой и не пахнет(редактировать можно в течении некоторого времени после написания)

02.01.2011, 17:40	#1
mutabor Телепат с дипломом Старожил Регистрация: 10.06.2007 Сообщений: 4,929	Сделать пункт меню активным (поменять внешний вид) Есть меню, активный пункт отличается от неактивного нижней границей и цветом фона. Классы написал, но т.к. давно не использовал JS (да и не сильно я его юзал много). Это меню PHP код: `<ul> <li><a class="item item-inactive" href="#">Rooms</a></li> <li><a class="item item-inactive" href="#">Staff</a></li> <li><a class="item item-active" href="#">Pupils</a></li> <li><a class="item item-inactive" href="#">School structure</a></li> <li><a class="item item-inactive" href="#">Settings</a></li> </ul>` Это классы Код HTML: .item { font-size: 11px; font-weight: bold; color: #fffffa; text-decoration: none; padding: 4px 10px; margin-right: 3px; } .item-active { background: #8B9BA8; border-bottom: 3px solid #8B9BA8; } .item-inactive { background: #b1b4bd; } Как написать скрипт, чтобы снимал выделение с активного, и задавал новому пункту при клике? Я так понял, нужно делать поиск элемента с классом item-active и менять класс этому элементу на item-inactive. А тому, по к-рому был клик, наоборот. Вот только с реализацией проблема у меня The future is not a tablet with a 9" screen no more than the future was a 9" black & white screen in a box. It’s the paradigm that survives. (Kroc Camen) Проверь себя! Онлайн тестирование \| Мой блог

04.01.2011, 13:03	#3
mutabor Телепат с дипломом Старожил Регистрация: 10.06.2007 Сообщений: 4,929	Сделал уже на чистом js. По этому поводу у меня еще вопрос теоретического характера появился: почему цикл for in выполняется намного раз больше, чем есть дочерних элементов? Например для списка <ul> с пятью <li>, итератор цикла принимает следующие значения: 0 1 2 3 4 5 6 7 8 9 10 length item А длина (length) массива: 11. Вместо ожидаемых пяти. Хотя работает все как надо. Я меняю в цикле класс элементам. Куда же идет запись для остальных шести??? The future is not a tablet with a 9" screen no more than the future was a 9" black & white screen in a box. It’s the paradigm that survives. (Kroc Camen) Проверь себя! Онлайн тестирование \| Мой блог

04.01.2011, 17:34	#4
InternetStranger php / delphi Форумчанин Регистрация: 10.06.2007 Сообщений: 175	А полный код можно посмотреть? ps: вышеприведенный код (с подключением jQuery) вопреки господствующему мнению приводит к увеличению загружаемого трафика всего на+24Kb и увеличению времени загрузки + (50-200ms). pss: не могу отредактировать сообщение #2. Оно ведь мной вроде написано? )) Кнопка "Правка" нету и всё ) Мистика G.Azamat { Web Development / Computer simulation } Начинающий программист думает, что в килобайте 1000 байтов, а законченный уверен, что в километре 1024 метра.

04.01.2011, 20:31	#5
mutabor Телепат с дипломом Старожил Регистрация: 10.06.2007 Сообщений: 4,929	PHP код: `function menu2click(event) { var i; var items=document.getElementById("second-menu").childNodes[1].childNodes; for (i in items) items[i].className="item-inactive"; event.target.className="item-active"; }` У меня предубеждений нет по поводу jQuery. Мне как-то все равно Да и я не себе делаю. Этот способ работает, проблемы никакой нет. Просто интересно как цикл работает, почему через один индексы элементов идут (1,3,5 и т.д., я проверил уже). А что находится под индексами 2,4,6? Причем className туда успешно записывается. The future is not a tablet with a 9" screen no more than the future was a 9" black & white screen in a box. It’s the paradigm that survives. (Kroc Camen) Проверь себя! Онлайн тестирование \| Мой блог

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Изменить внешний вид ProgressBar	vandrouny	Общие вопросы .NET	1	31.10.2010 19:04
Внешний вид страницы	Syltan	JavaScript, Ajax	1	28.04.2010 13:41
Внешний вид программы под ХР	Rock'n'rolla	Общие вопросы Delphi	13	21.01.2010 23:17
И сново sendMessage =) Как нажать пункт верхнего меню и меню правой кнопки?	TwiX	Win Api	9	15.10.2009 01:57
Внешний вид	Golovastik	SQL, базы данных	2	09.10.2009 18:12