Форум

m~r.Nemo · #1 (**permalink**) 18.01.2019, 21:24

Есть простой скрипт, который подсвечивает ссылку текущей страницы,

<!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>
Чтобы нельзя было крикнуть и перейти на эту же страницу?

Malleys · #2 (**permalink**) 18.01.2019, 23:08

Достаточно у ссылки удалить атрибут 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 (как у вас)

m~r.Nemo · #3 (**permalink**) 18.01.2019, 23:59

Скрипт при совпадении с URL-ом присваивать ссылке class="act", и менят цвет с синего на зелёный, а надо чтобы при совпадении URL-а менялось с <a href="003.html" class="act">Ссылка3</a> на <span class="act">Ссылка3</spana>

m~r.Nemo · #4 (**permalink**) 19.01.2019, 18:54

Malleys,
Сорри, моих познаний недостаточно чтоб разобраться, куда именно вставить?

Malleys · #5 (**permalink**) 21.01.2019, 20:16

Сообщение от m~r.Nemo

куда именно вставить?

Ваш скрипт заменить на один из моих вариантов. Например...

<!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>

m~r.Nemo · #6 (**permalink**) 15.02.2019, 05:12

А как быть если меню в два/три уровня?

Например;

<!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/>

m~r.Nemo · #7 (**permalink**) 17.02.2019, 19:45

Неужели никто не знает как подсветить ссылки на текущий раздел и подразд?

Форум

Справочник

Discord чат

Курсы javascript