Иногда бывает необходимо выделить или подсветить (цветом, стилем) текущую ссылку, то есть ссылку, ссылающуюся на текущую страницу. Следующий пост поможет вам, я надеюсь, решить данную задачу. А вообще, если уж честно, просто отвечаю на вопрос, заданный на форуме ... Звучал он примерно так: Привет! Вопрос такой возник, как сделать так, чтобы в меню, ссылка, на ту страницу где в данный момент находится пользователь, была как бы неактивной? Наподобие того, что в меню созданном в конструкторе Только мне кажется я ни тем занимаюсь. Может есть скрипт распространяющийся на все ссылки на странице, т.е. если на странице присутствует ссылка на неё саму, то она становится неактивной? Или например, чтобы сравнение происходило только у ссылок с определенным class'ом, и при совпадении, class подменялся на другой. Неактивной имею в виду, или задать другой стиль через CSS или преобразующий такую ссылку в обычный текст. В принципе, если трудно такое реализовать, то попробую адаптировать указанный мной выше скрипт до конца.
Надеюсь изложил все более-менее внятно.:) Задача изложена вполне внятно и доходчиво. Приступим.
Без вступления - вот код ... пояснения ниже ... Code <script type="text/javascript">
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>
Где: el=document.getElementById('msgText') - ID блока (таблицы и т.п.) в котором будем искать ссылки. Почему именно так - ниже. .getElementsByTagName('a') - находим все элементы «а» в блоке с ID «msgText» (id="msgText"). var url=document.location.href; - объявляем переменную, равную текущему URL страницы. for(var i=0;i<el.length; i++) - походимся по каждой ссылке из найденных. «el.length» - количество найденных ссылок. (элементов «а»). el[i].className += ' act'; - добавляем текущему элементу класс «act». Вот этот пробел - необходим «'_act'» чтобы не получить вот такой класс «class="redact"» - если ссылка уже имеет свой класс «class="red"». То есть мы добавляем к текущеме классу класс «act» и получаем «class="red act"». Если у ссылки изначально нет класса, будет вот так «class=" act"», что не считается ошибкой и будет работать.
Можно сократить скрипт, если не нужно обрабатывать ошибки и будем писать скрипт в исходнике....
Мне не очень нравятся подобные действия, особенно когда можно избежать этого, то есть вынести скрипт во внешний файл. Для этого, нужно написать небольшую функцию.
Вот её код. Code function shineLinks(id){
try{
var el=document.getElementById(id).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){}
};
Где: function shineLinks(id) - сама функция. ID блока, для поиска ссылок, передаём из вызова.
Как и написано выше, класс для поиска передаем из вызова. Вызывать функцию нужно после загрузки документа или, хотя бы блока, в котором осуществляется поиск.
То есть скрипт вызова писать в самом низу документа. Например, перед закрывающим тегом </body>. Пример: Code
<script type="text/javascript">shineLinks('msgText');</script>
</body>
</html>
Следовательно, функцию можно вызывать не к одному блоку, а к нескольким, маленьким блокам, чем существенно снизить время обработки ссылок, нежели, если вызывать ко всей странице... К этому же вопросу (скорости работы) относится и то, почему функция провязана к ID блока, а не ко всем ссылкам страницы.
Считаю неправильным вешать такой обработяик на всю страницу. Можно модифицировать функцию и передавать в неё, кроме ID блока поиска, ещё и дополнительные параметры. Например классактивной ссылки.
Пример:
Функция:
Code (JavaScript) function shineLinks(id,class){
try{
var el=document.getElementById(id).getElementsByTagName('a');
var url=document.location.href;
for(var i=0;i<el.length; i++){
if (url==el[i].href){
el[i].className += ' '+class+'';
};
};
}catch(e){}
};
Вызов: Code
<script type="text/javascript">shineLinks('msgText','act');shineLinks('msgText2','act2');</script>
</body>
</html>
CSS: Code <style type="text/css">
body{font: 11px/normal Verdana,sans-serif;}
a{text-decoration:none;color:#999;}
a:hover{color:#666;}
a.act{color:#F00;}
a.act2{color:#0F0;}
</style>
HTML: Code <div id="msgText">
<a href="/1">Ссылка</a>
<a href="/2.html">Ссылка</a>
<a href="/?3">Ссылка</a>
</div>
<div id="msgText2">
<a href="/1">Ссылка</a>
<a href="/2.html">Ссылка</a>
<a href="/?3">Ссылка</a>
</div>
Текущие ссылки в блоке <div id="msgText"> - будут иметь класс «act», так как для него вызвана shineLinks('msgText','act'); и, соответственно, красными (color:#F00;), а в блоке <div id="msgText2"> - зелёными ... (color:#0F0;). По тем сходным причинам ... ヅ
Решение для подсветки (выделения) активной ссылки с использованием jQueryВсё то же самое ... но, чуть-чуть по другому. Код: Code $(document).ready(function(){
var url=document.location.href;
$.each($("#msgText a"),function(){
if(this.href==url){$(this).addClass('act');};
});
});
Где: $(document).ready() - узнаём о готовности документа, то есть о том, что его объектная модель готова к использованию, обработке скриптом. var url=document.location.href; - Объявляем переменную «url» и назначаем ей значение, равное текущему URL документа. $.each($("#msgText a"),function() - ищем все элементы «а» в блоке «msgText» и назначаем им обработчик. if(this.href==url){$(this).addClass('act');}; - если атрибут «href», текущей ссылки равен текущему URL документа, назначаем/добавляем ей класс «act».
Код и стили - те же. «Живые» примеры наблюдаем вот здесь: ☑ Выделяем активные ссылки чистым JavaScript ☑ Выделяем активные при помощи jQuery Думаю всё понятно ... ヅ
Если это не так, и вам что-то не понятно - можете задать свой вопрос в комментариях (ниже).
И ещё, скрипты на чистом JS должны находиться ниже блока меню(блок с ID) ...
Для скриптов на JQ - это не существенно, т.к. прописан $(document).ready(); ...
P.S.Всем удачи... ヅ
Flesh.
Источник: Как подсветить (выделить) активную ссылку (текущую). JavaScript + CSS + jQuery,скрипты для юКоз,uCoz | 