Фильтр по:
  

Как сделать активную ссылку с другим классом?

Как сделать так, чтобы...

  • Страница 1 из 1
  • 1
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Раздел для начинающих » Как сделать так, чтобы... » Как сделать активную ссылку с другим классом? (как в меню)
Как сделать активную ссылку с другим классом?
Дата: Пятница, 13.08.2010, 23:00 |
Полковник
Группа: Помощники
Сообщений: 210
Награды: 0
Репутация: 11
Статус: Offline


 Привет! Вопрос такой возник, как сделать так, чтобы в меню, ссылка, на ту страницу где в данный момент находится пользователь, была как бы неактивной? Наподобие того, что в меню созданном в конструкторе
Code
<script type="text/javascript">$(function(){_uBuildMenu('#uMenuDiv1',0,document.location.href+'/','uMenuItemA','uMenuArrow',2500);})</script>
Этот-то скрипт я смог под свое меню подстроить, но дело в том, что у меня на сайте два меню, я попробовал прописать два ID в скрипт
Code
<script type="text/javascript">$(function(){_uBuildMenu('#uMenuDiv1,#uMenuDiv2',0,document.location.href+'/','uMenuItemA','uMenuArrow',2500);})</script>
Но тогда он работает только со вторым меню, а на первое перестает распространяться. Единственное не попробовал два раза прописать скрипт с разными ID.
Только мне кажется я ни тем занимаюсь. Может есть скрипт распространяющийся на все ссылки на странице, т.е. если на странице присутствует ссылка на неё саму, то она становится неактивной? Или например, чтобы сравнение происходило только у ссылок с определенным 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
 
Дата: Суббота, 14.08.2010, 06:54 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 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>

вроде работает как надо.

Мои - работают быстрее ... biggrin ... да и настроек больше.... ヅ

...
Flesh

 
Дата: Суббота, 14.08.2010, 13:31 |
Полковник
Группа: Помощники
Сообщений: 210
Награды: 0
Репутация: 11
Статус: Offline


 likbezz, спасибо!
Quote (likbezz)
Мои - работают быстрее ... biggrin ... да и настроек больше.... ヅ
да, согласен.

 
Дата: Воскресенье, 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
js/pubs2.js

И тогда бы вверху страницы ставил бы ссылку
Code
<script src="js/pubs1.js"></script>
, а внизу страницы -
Code
<script src="js/pubs2.js"></script>
.
Но если понабодится внести изменения в файл (например, добавить новый год - 2012) - то нужно будет выполнить изменения в обоих файлах. А это как-то нерациональным мне представляется.

 
Дата: Воскресенье, 11.09.2011, 13:37 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Хрюн,
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>

...

 
Дата: Воскресенье, 11.09.2011, 13:47 |
Группа: Гости





 Спасибо.
А при этом не будет случайно выделяться ссылка в левом меню
Code
<li><a href="pubs2010.htm">Публикации</a>...
?
(тогда, когда будет открыта страница с 2010 годом)?

 
Дата: Воскресенье, 11.09.2011, 13:51 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Хрюн,
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;)...
...

 
Дата: Воскресенье, 11.09.2011, 14:26 |
Группа: Гости





 Спасибо.
Вот теперь всё получается.
Проверил в четырёх разных браузерах - работает.

Очень здорово, что вот эта штуковина
Code
function shineLinks(){
не содержит в скобках class.
Когда я пробовал варианты с id в скобках (неделю назад), тогда годы отображались, а когда я ставил в скобки class, тогда FireFox и IExplorer не отображали годы вообще, а Opera и GoogleChrome нормально отображали.

Ещё раз большое спасибо. Это то, что надо.

 
Дата: Воскресенье, 11.09.2011, 14:38 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Гость,
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();

...

 
Скрипты и коды для юкоз - Форум аццкого кодера » Раздел для начинающих » Как сделать так, чтобы... » Как сделать активную ссылку с другим классом? (как в меню)
  • Страница 1 из 1
  • 1
Поиск:


Мобильная версия