Подсветка пункта меню текущей страницы
Есть простой скрипт, который подсвечивает ссылку текущей страницы,
<!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, время: 08:14. |