• 427
  • 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: нужны навыки css html

Многие сталкивались с такой проблемкой , как выделить активную страницу в меню.
Часто в готовых шаблонах такой функционал уже есть , но готовый шаблон для нас не подходит, а если берем готовый то надо переделать,поставить новое меню, и хоп там нет такого функцонала. Но выход как всегда есть.

Как всегда немного погуглив и пояндексил нашел два простых варианта на JS, и этот код легко встраивается в любой шаблон .
Итак вариант 1:
Немного стилей для примера

Код:
a{text-decoration:none;color:#999;}
a:hover{color:#666;}
a.act{color:#F00;}

Само меню вот такое простенькое
Код:
<div id="msgText">
<a href="1.html">Ссылка1</a>
<a href="2.html">Ссылка2</a>
</div>

И последнее сам JS

Код:
<script>
try{
var el=document.getElementById('msgText').getElementsByTagName('a');
var url=document.location.href;
for(var i=0;i<el.length; i++){
if (url==el[i].href){
el[i].className += ' act';
};
};
}catch(e){}
</script>

Ну с первым вариантом все,Вариант 2:
Добавляем в секцию head скрипт

Код:
<script>
onload = function ()
{
for (var lnk = document.links, j = 0; j < lnk.length; j++)
if (lnk [j].href == document.URL) lnk [j].style.cssText = 'color:black;text-decoration:none; border:1px solid #000';
}
</script>

Ну и в тело сайта само меню
Код:
<ul class="menu">
<li><a href="1.html">1</a></li>
<li><a href="2.html">2</a></li>
</ul>

В скрипте в этой строке
Код:
 style.cssText = ' задаёте свои стили';

Вот и все,пользуемся, все просто дальше некуда.Что не понятно спрашивайте отвечу.

Можешь почитать и вот эту статейку "Смена цифр на JavaScript"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Вы нашли что искали?
Результаты

----