[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Выделение активного пункта меню с помощью JS
Xander
Доброго времени суток!

          		<ul class="menu">
<li
class="top_menu_about"><a href="">о pdj</a></li>
<li
class="gal"><a href="">галерея</a></li>
<li
class="top_menu_tex"><a href="">техподдержка</a></li>
<li
class="top_menu_buy"><a href="">где купить</a></li>
<li
class="top_menu_kont"><a href="">контакты</a></li>
</ul>





каким образом мне можно добавить класс .active к li дабы выделить активный пункт меню!

johniek_comp
вообще легко
<li class="top_menu_about active"><a href="">о pdj</a></li>


js
document.getElementsByTagName('li')[0].className = "active"


какой вопрос - такой ответ

_____________
user posted image
killer8080
ну например так
          		<ul class="menu">
<
li><a href="">о pdj</a></li>
<
li><a href="">галерея</a></li>
<
li><a href="">техподдержка</a></li>
<
li><a href="">где купить</a></li>
<
li><a href="">контакты</a></li>
</
ul>

<
script type="text/javascript">

var links = document.getElementsByClassName('menu')[0].getElementsByTagName('a');
for(var i = 0; i < links.length; i++){
if(links[i].href == location.href)
links[i].parentNode.className = 'active';
}

</script>
Xander
ни один вариант не работает он заменят мой класс на .active (
Michael
Чтобы не заменяло, надо добавлять ;) .

links[i].parentNode.className = links[i].parentNode.className + ' active'; 


_____________
There never was a struggle in the soul of a good man that was not hard
killer8080
Цитата (Xander @ 15.03.2013 - 06:54)
ни один вариант не работает он заменят мой класс на .active (

кстати, а для чего у тебя каждому li назначен свой класс? У тебя кадлый пункт имеет индивидуальный стиль? blink.gif



Спустя 8 минут, 12 секунд killer8080 написал(а):
var links = document.getElementsByClassName('menu')[0].getElementsByTagName('a'); 
for(var i = 0; i < links.length; i++){
if(links[i].href == location.href)
links[i].parentNode.className += ' active';
}
Xander
да)
Xander
всем спс за помощь) сделал)
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.