Javascript-форум - можно ли изменить цвет ссылок? и одну ссылку заменить на текст?

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - можно ли изменить цвет ссылок? и одну ссылку заменить на текст? (https://javascript.ru/forum/misc/76934-mozhno-li-izmenit-cvet-ssylok-i-odnu-ssylku-zamenit-na-tekst.html)

походу я опять где-то накосячила, скрипт подсвечивает ссылки на главные папок, но ссылку на саму себя не меняет на спан

Malleys,
можно спросить? какая строка меняет тег <а> на спан?

Никто не знает как на этой странице ссылку (тег <а>) заменить на текст (тег <span>)?

<!DOCTYPE html>
<html>
<head>
<title>transform</title>
<style>
body { font: 14px normal Times, serif; }
div { border: 1px solid #999; padding: 5px; margin: 5px; }
a:active, a:link { color: #005aff; text-decoration: none; }
a.act:active, a.act:link { color: #009900; text-decoration: none; } 
a.abc:active, a.abc:link { color: #009900; text-decoration: none; } 
a.bcd:active, a.bcd:link { color: #068f06; text-decoration: none; } 
a.cde:active, a.cde:link { color: #0d850d; text-decoration: none; } 
a.def:active, a.def:link { color: #127a12; text-decoration: none; } 
a.efg:active, a.efg:link { color: #167012; text-decoration: none; } 
a.:visited { color: #5995ff; text-decoration: none; } 
a:hover { color: #7a00ff; text-decoration: none; }
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var links = Array.prototype.slice.call(document.links);
var classes = ["act","abc", "bcd", "cde", "def", "efg"];
var href = location.href;
for(var index = 0, length = links.length, link; index < length; index++) {
link = links[index];
for(var level = 0, part = href; level < classes.length; level++) {
if(link.href === part || link.href === part + "/") {
link.className = classes[level];
break;
}
part = part.replace(/\/[^/]*\/?$/, "");

}
}
});
</script>
</head>
<body>
<div class="menu" id="menu1">
<a href="/razdel/">razdel/</a><br>
<a href="/razdel/01.html">page-01</a><br>
<a href="/razdel/02.html">page-02</a><br>
<a href="/razdel/03.html">page-03</a>
<div class="menu" id="menu2">
<a href="/razdel/podrazdel/">podrazdel/</a><br>
<a href="/razdel/podrazdel/01.html">page-01</a><br>
<a href="/razdel/podrazdel/02.html">page-02</a><br>
<a href="/razdel/podrazdel/03.html">page-03</a>
<div class="menu" id="menu3">
<a href="/razdel/podrazdel/podpodrazdel/">podpodrazdel/</a><br>
<a href="/razdel/podrazdel/podpodrazdel/01.html">page-01</a><br>
<a href="/razdel/podrazdel/podpodrazdel/02.html">page-02</a><br>
<a href="/razdel/podrazdel/podpodrazdel/03.html">page-03</a>
<div class="menu" id="menu4">
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/">podrazdel-a/</a><br>
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/01.html">page-01</a><br>
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/02.html">page-02</a><br>
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/03.html">page-03</a>
</div>
</div>
</div>
</div>
</body>
</html>

Чтобы ссылка не нажималась можно так...

.act {
    pointer-events: none;
}

Непонятно зачем вы это удалили!

Для вас имеет какой-то сакральный смысл элемент <span>?

Зачем вы удаляете все отступы в коде? https://javascript.ru/forum/505820-post124.html

Malleys,
ссылка хоть не нажималась, но не подсвечивалась
у меня есть какая то старая версия оперы-мини которая даже радиус углов не распознаёт, этим я хочу сказать, что если я сама могу обновить свой браузер до последней версии, то заставить всех посетителей обновлять браузеры я не могу, так же нельзя предугадать с какого браузера зайдёт посетитель, поэтому желательно чтобы скрипт работал во всех браузерах и старых версиях тоже (разные недоразумения типа ослика иа в список не входят).

Так напишите в .act как должна выглядеть эта ссылка!

99.9% обычных людей заходят с обновлённого браузера, остальные являются параноиками, веб-программистами, веб куда-то скатился, против всех, гугл следит, люблю хрюшу, гиками, ночтальгия по 2007... а вы тут со своим border-radius

Я не знаю, как вы проверяете свой код, но почему бы его не запускать в песочнице, типа печатаете и сразу результат видно...

Цитата:

Сообщение от Блондинка

возможно ли сделать со спаном или нет?

вам уже показали со <span> вы продолжили возмущаться, поэтому его убрали...

У вас прямо философия получается: меняю кнопку на див, ссылку на спан.

Давайте угадаю, дальше идёт: меняю стиль на блок, картинку на холст... как зачем? Меняю текст на картинку!

Какой баг!!! типа печатаете и сразу результат видно, а то ваш ларёк на погроммирование в аду похож! И попробуй введи обратный слеш!

возможно ли сделать со спаном или нет?

Цитата:

Сообщение от Malleys

вам уже показали со <span> вы продолжили возмущаться, поэтому его убрали...

а в каком посте?

Цитата:

Сообщение от Malleys (Сообщение 505755)

<!DOCTYPE html>
<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">Ссылка 001</a><br/>
<a href="/001.html">Ссылка /001</a><br/>
<a href="css/001.html">Ссылка css/001</a><br/>
<a href="/css/001.html">Ссылка /css/001</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">
(function() {
	var links = Array.prototype.slice.call(document.links);
	for(var index = 0, length = links.length, link; index < length; index++) {
		link = 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>

Проверил пример... работает как следует! Но очень зависит, откуда вы запускаете...

Так чтобы работало, вы и должны просматривать файл 001.html в корне сайта/файловой системы

Так чтобы работало, вы и должны просматривать http://сайт.ru/001.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"> и ларк не переваривает!

этот пост? данный пост и скрипт я воспринимаю как отдельный отличный скрипт, который можно и нужно использовать на простых сайтах с одноуровневым меню, а не начала/продолжила возмущаться,

дальше я просто спросила про скрипт для более сложного сайта, где много папок и страниц, с большой вложенностью,

я воспринимаю это как отдельные скрипты, каждый предназначеный для похожих но немного разных целей.

Вот оно для одного и другого вместе, объединил, проверьте...

<!doctype html>
<html>
<head>
	<title>transform</title>
	<style>
		body { font: 14px normal Times, serif; }
		div { border: 1px solid #999; padding: 5px; margin: 5px; }
		a { color: #005aff; text-decoration: none; } 
		a:visited { color: #5995ff; text-decoration: none; } 
		a:hover { color: #7a00ff; text-decoration: none; }
		.act { text-decoration: underline; }
		.efg { color: #167016; }
		.def { color: #127a12; }
		.cde { color: #0d850d; }
		.bcd { color: #068f06; }
		.abc { color: #009900; }
	</style>
	<script>
		document.addEventListener("DOMContentLoaded", function() {
			var links = Array.prototype.slice.call(document.links);
			var classes = ["act",  "abc", "bcd", "cde", "def", "efg"];
			var href = location.href;

			for(var index = 0, length = links.length, link; index < length; index++) {
				link = links[index];

				for(var level = 0, part = href; level < classes.length; level++) {
					if(link.href === part || link.href === part + "/") {
						if(level === 0) {
							var p = document.createElement("span");
							p.className = classes[level];
							p.innerHTML = link.innerHTML;
							link.parentNode.replaceChild(p, link);
						} else {
							link.className = classes[level];
						}
						break;
					}

					part = part.replace(/\/[^/]*\/?$/, "");
				}
			}
		});
	</script>
</head>
<body>
<div class="menu" id="menu1">
	<a href="/razdel/">razdel/</a><br>
	<a href="/razdel/01.html">page-01</a><br>
	<a href="/razdel/02.html">page-02</a><br>
	<a href="/razdel/03.html">page-03</a>
	<div class="menu" id="menu2">
		<a href="/razdel/podrazdel/">podrazdel/</a><br>
		<a href="/razdel/podrazdel/01.html">page-01</a><br>
		<a href="/razdel/podrazdel/02.html">page-02</a><br>
		<a href="/razdel/podrazdel/03.html">page-03</a>
		<div class="menu" id="menu3">
			<a href="/razdel/podrazdel/podpodrazdel/">podpodrazdel/</a><br>
			<a href="/razdel/podrazdel/podpodrazdel/01.html">page-01</a><br>
			<a href="/razdel/podrazdel/podpodrazdel/02.html">page-02</a><br>
			<a href="/razdel/podrazdel/podpodrazdel/03.html">page-03</a>
			<div class="menu" id="menu4">
				<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/">podrazdel-a/</a><br>
				<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/01.html">page-01</a><br>
				<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/02.html">page-02</a><br>
				<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/03.html">page-03</a>
			</div>
		</div>
	</div>
</div>
</body>
</html>

Надо для простого пишите var classes = ["act"];

Надо для сложного пишите var classes = ["act", "abc", "bcd", "cde", "def", "efg"];

Строка 21 в этом посте