Подсветка пункта меню текущей страницы
Есть простой скрипт, который подсвечивает ссылку текущей страницы,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head><title></title></head> <body> <style type="text/css"> body { font: 14px normal Times, serif; } a { text-decoration: none; color: #5a5aff; } a:hover { color: #5a96ff; } a.act { color: #4c994c; } span.act { color: #4c994c; } </style> <div id="msgText"> <a href="001.html">Ссылка1</a><br/> <a href="002.html">Ссылка2</a><br/> <a href="003.html">Ссылка3</a><br/> <a href="004.html">Ссылка4</a><br/> <a href="005.html">Ссылка5</a><br/> <a href="006.html">Ссылка6</a><br/> <a href="007.html">Ссылка7</a><br/> </div> <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> </body> </html> Как сделать чтобы на текущей странице просто выводилось текстом название страницы <span class="act">СсылкаХ</span> Чтобы нельзя было крикнуть и перейти на эту же страницу? |
Достаточно у ссылки удалить атрибут href, и она перестанет вести себя как ссылка!
Array.from(document.links).forEach(function(link) { if(link.href === location.href) link.removeAttribute("href"); });в CSS селектор такой #msgText a:not([href]) UPD или если нужна поддержка в старых браузерах (увидел doctype), (function() { for(var index = 0, length = document.links.length, link; index < length; index++) { link = document.links[index]; if(link.href === location.href) { var p = document.createElement("span"); p.className = "act"; p.innerHTML = link.innerHTML; link.parentNode.replaceChild(p, link); } } })();в CSS селектор такой будет #msgText span.act (как у вас) |
Скрипт при совпадении с URL-ом присваивать ссылке class="act", и менят цвет с синего на зелёный, а надо чтобы при совпадении URL-а менялось с <a href="003.html" class="act">Ссылка3</a> на <span class="act">Ссылка3</spana>
|
Malleys,
Сорри, моих познаний недостаточно чтоб разобраться, куда именно вставить? |
Цитата:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head><title></title></head> <body> <style type="text/css"> body { font: 14px normal Times, serif; } a { text-decoration: none; color: #5a5aff; } a:hover { color: #5a96ff; } a.act { color: #4c994c; } span.act { color: #4c994c; } </style> <div id="msgText"> <a href="001.html">Ссылка1</a><br/> <a href="002.html">Ссылка2</a><br/> <a href="003.html">Ссылка3</a><br/> <a href="004.html">Ссылка4</a><br/> <a href="showhtml">Ссылка5</a><br/> <a href="006.html">Ссылка6</a><br/> <a href="007.html">Ссылка7</a><br/> </div> <script type="text/javascript"> (function() { for(var index = 0, length = document.links.length, link; index < length; index++) { link = document.links[index]; if(link.href === location.href) { var p = document.createElement("span"); p.className = "act"; p.innerHTML = link.innerHTML; link.parentNode.replaceChild(p, link); } } })(); </script> </body> </html> |
А как быть если меню в два/три уровня?
Например; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head><title></title></head> <body> <style type="text/css"> body { font: 14px normal Times, serif; } a { text-decoration: none; color: #5a5aff; } a:hover { color: #5a96ff; } a.act-1, a.act-2 { color: #4c994c; } span.act { color: #4c994c; } </style> <div id="msgText"> <a href="01.html">Раздел1</a><br/> <a href="01/01.html">Подраздел1</a><br/> <a href="01/01/001.html">Ссылка1</a><br/> <a href="01/01/002.html">Ссылка2</a><br/> <a href="01/01/003.html">Ссылка3</a><br/> <a href="01/01/004.html">Ссылка4</a><br/> <a href="01/01/005.html">Ссылка5</a><br/> <a href="01/02.html">Подраздел2</a><br/> <a href="01/02/001.html">Ссылка1</a><br/> <a href="01/02/002.html">Ссылка2</a><br/> <a href="01/02/003.html">Ссылка3</a><br/> <a href="01/02/004.html">Ссылка4</a><br/> <a href="01/02/005.html">Ссылка5</a><br/> <a href="02.html">Раздел2</a><br/> <a href="02/01.html">Подраздел1</a><br/> <a href="02/01/001.html">Ссылка1</a><br/> <a href="02/01/002.html">Ссылка2</a><br/> <a href="02/01/003.html">Ссылка3</a><br/> <a href="02/01/004.html">Ссылка4</a><br/> <a href="02/01/005.html">Ссылка5</a><br/> <a href="02/02.html">Подраздел2</a><br/> <a href="02/02/001.html">Ссылка1</a><br/> <a href="02/02/002.html">Ссылка2</a><br/> <a href="02/02/003.html">Ссылка3</a><br/> <a href="02/02/004.html">Ссылка4</a><br/> <a href="02/02/005.html">Ссылка5</a><br/> </div> </body> </html> Блин, чёт я тупанул малость, ссылку на текущую всё правильно заменить на span, а ссылкам на раздел/подраздел присвоить class надо... <a class="act-1" href="01.html">Раздел1</a><br/> <a class="act-2" href="01/01.html">Подраздел1</a><br/> |
Неужели никто не знает как подсветить ссылки на текущий раздел и подразд?
|
Часовой пояс GMT +3, время: 18:27. |