|
Как сделать активную ссылку с другим классом?
|
|
| [1] Komoff [13.08.2010, 23:00] |
Привет! Вопрос такой возник, как сделать так, чтобы в меню, ссылка, на ту страницу где в данный момент находится пользователь, была как бы неактивной? Наподобие того, что в меню созданном в конструкторе Code <script type="text/javascript">$(function(){_uBuildMenu('#uMenuDiv1',0,document.location.href+'/','uMenuItemA','uMenuArrow',2500);})</script> Code <script type="text/javascript">$(function(){_uBuildMenu('#uMenuDiv1,#uMenuDiv2',0,document.location.href+'/','uMenuItemA','uMenuArrow',2500);})</script>
Только мне кажется я ни тем занимаюсь. Может есть скрипт распространяющийся на все ссылки на странице, т.е. если на странице присутствует ссылка на неё саму, то она становится неактивной? Или например, чтобы сравнение происходило только у ссылок с определенным class'ом, и при совпадении, class подменялся на другой. Неактивной имею в виду, или задать другой стиль через CSS или преобразующий такую ссылку в обычный текст. В принципе, если трудно такое реализовать, то попробую адаптировать указанный мной выше скрипт до конца.
Надеюсь изложил все более-менее внятно.:)Добавлено (13.08.2010, 23:00)
---------------------------------------------
Вот в принципе нашел что мне нужно было Code <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';
}
</script>
Сообщение отредактировал Komoff - Пятница, 13.08.2010, 03:03 |
|
| [2] likbezz [14.08.2010, 06:54] |
Komoff,
...
«Как подсветить (выделить) активную (текущую) ссылку. JavaScript + CSS»
...
Думаю, всё подробно расписано ... ヅ
Quote (Komoff) Вот в принципе нашел что мне нужно было Code <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';
}
</script> вроде работает как надо.
Мои - работают быстрее ...  ... да и настроек больше.... ヅ ...
Flesh |
|
| [3] Komoff [14.08.2010, 13:31] |
likbezz, спасибо! Quote (likbezz) Мои - работают быстрее ... biggrin ... да и настроек больше.... ヅ |
|
| [4] Хрюн [11.09.2011, 10:47] |
likbezz, спасибо большое за Ваше внимание и за рецепты в теме "Как подсветить (выделить) активную (текущую) ссылку. JavaScript + CSS".
Мой сайт http://geopgsga.narod.ru/pubs/pubs2010.htm". Раздел "Публикации".
Но там пока ещё всё по-старому, а экспериментирую со ссылками я на компьютере (локально). (Пока не добьюсь, чего хочу).
Прописать функцию к какому-то другому блоку (вроде body и др.) не хотелось бы, потому что хочется просто вставить на странице в двух местах ссылку
Code <script src="js/pubs.js"></script>
и больше ни в каких местах страницу не трогать. То есть, не приписывать ни к каким тегам классы или что-то подобное.
А в этом файле *.js в данный момент находится такое содержимое:
Code document.write ('<table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse: collapse"><tr><td>'); document.write (' <div id="msgText">'); document.write (' <a href="pubs2006.htm">2006</a> | <a href="pubs2007.htm">2007</a> | <a href="pubs2008.htm">2008</a> | <a href="pubs2009.htm">2009</a> | <a href="pubs2010.htm">2010</a> | <a href="pubs2011.htm">2011</a>'); document.write (' </div>'); document.write ('</td></tr></table>'); 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){} }; shineLinks('msgText','act');
Этот код работает во всех основных браузерах (IExplorer, FF, Opera, GChrome). Но только для первой ссылки из двух.
В общем, можно ли как-то модифицировать код именно в файле "js/pubs.js", чтобы выделялось две ссылки; и при этом не трогать код самой страницы, кроме прописывания там ссылки на файл Code <script src="js/pubs.js"></script>
Спасибо.
Извините, что своими глупыми вопросами отнимаю Ваше время.Добавлено (11.09.2011, 10:47)
---------------------------------------------
Да, вдогонку к предыдущему моему сообщению.
Я, конечно, мог бы создать ещё один файл
И тогда бы вверху страницы ставил бы ссылку Code <script src="js/pubs1.js"></script> Code <script src="js/pubs2.js"></script>
Но если понабодится внести изменения в файл (например, добавить новый год - 2012) - то нужно будет выполнить изменения в обоих файлах. А это как-то нерациональным мне представляется. |
|
| [5] likbezz [11.09.2011, 13:37] |
Хрюн, Quote (Хрюн) В общем, можно ли как-то модифицировать код именно в файле "js/pubs.js", чтобы выделялось две ссылки; и при этом не трогать код самой страницы, кроме прописывания там ссылки на файл
Ну, в общем, я уже дал готовый код, не привязывать к ID вообще, а просто к документу, это проще, чем писать функцию для класса:
Вот примерное содержимое вашего файла (pubs.js):
Code document.write('<table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse: collapse"><tr><td><a href="publications2009.htm">2009</a> | <a href="publications2010.htm">2010</a></td></tr></table>');
function shineLinks(){
try{var el=document.getElementsByTagName('a'),url=document.location.href,len=el.length;
for(var i=0;i<len;i++){if(url==el[i].href){el[i].className+= ' act';};};
}catch(e){}
};
shineLinks();
- просто будет пробегаться циклом по всем ссылкам, благо у вас их не много ))
...
И, кстати, зачем вам там вообще таблица? Можно проще и гораздо короче:
Code document.write('<div style="text-align:center;"><a class="selmar" href="pubs2006.htm">2006</a> | <a class="selmar" href="pubs2007.htm">2007</a> | <a class="selmar" href="pubs2008.htm">2008</a> | <a class="selmar" href="pubs2009.htm">2009</a> | <a class="selmar" href="pubs2010.htm">2010</a> | <a class="selmar" href="pubs2011.htm">2011</a></div>');
function shineLinks(){
try{var el=document.getElementsByTagName('a'),url=document.location.href,len=el.length;
for(var i=0;i<len;i++){if(url==el[i].href){el[i].className+= ' act';};};
}catch(e){}
};
shineLinks();
И стили:
Code <style type="text/css">
a.act{font-weight:bold;}
</style>
... |
|
| [6] Хрюн [11.09.2011, 13:47] |
Спасибо.
А при этом не будет случайно выделяться ссылка в левом меню Code <li><a href="pubs2010.htm">Публикации</a>...
(тогда, когда будет открыта страница с 2010 годом)? |
|
| [7] likbezz [11.09.2011, 13:51] |
Хрюн, Quote (Хрюн) А при этом не будет случайно выделяться ссылка в левом меню
Будет ) ... Будет добавлен класс «act» ...
Но, можно прописать, например:
Code document.write('<div class="blockLinks"><a class="selmar" href="pubs2006.htm">2006</a> | <a class="selmar" href="pubs2007.htm">2007</a> | <a class="selmar" href="pubs2008.htm">2008</a> | <a class="selmar" href="pubs2009.htm">2009</a> | <a class="selmar" href="pubs2010.htm">2010</a> | <a class="selmar" href="pubs2011.htm">2011</a></div>');
function shineLinks(){
try{var el=document.getElementsByTagName('a'),url=document.location.href,len=el.length;
for(var i=0;i<len;i++){if(url==el[i].href){el[i].className+= ' act';};};
}catch(e){}
};
shineLinks();
и стили:
Quote (CSS) <style type="text/css">
div.blockLinks{text-align:center;}
div.blockLinks a.act{font-weight:bold;}
</style>
- тогда, у вас стилевое оформление будет исключительно в блоках с классом blockLinks ... К тому же, вынесете из кода стилевое оформление (text-align:center;)...
... |
|
| [8] Гость [11.09.2011, 14:26] |
Спасибо.
Вот теперь всё получается.
Проверил в четырёх разных браузерах - работает.
Очень здорово, что вот эта штуковина Code function shineLinks(){
Когда я пробовал варианты с id в скобках (неделю назад), тогда годы отображались, а когда я ставил в скобки class, тогда FireFox и IExplorer не отображали годы вообще, а Opera и GoogleChrome нормально отображали.
Ещё раз большое спасибо. Это то, что надо. |
|
| [9] likbezz [11.09.2011, 14:38] |
Гость, Quote (Гость) не содержит в скобках class
Это не “в скобках class”, а параметры, передаваемые скрипту. Сколько передаёте, только и принимаете:
Изначально, функция была такой:
Code 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){}
};
shineLinks('msgText','act');
То есть, с запуска:
Quote shineLinks('msgText','act');
вы передаёте в функцию ID блока и класс для ссылки.
Функция получает передаваемые данные:
Quote function shineLinks(id,class){
};
- Если же вам не нужно все это, упрощаем: ничего не передаём, а класс для ссылки прописываем руками - получаем упращённую версию:
Code function shineLinks(){
try{var el=document.getElementsByTagName('a'),url=document.location.href,len=el.length;
for(var i=0;i<len;i++){if(url==el[i].href){el[i].className+= ' act';};};
}catch(e){}
};
shineLinks();
... |
|