Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.01.2019, 21:24
Аватар для m~r.Nemo
Аспирант
Отправить личное сообщение для m~r.Nemo Посмотреть профиль Найти все сообщения от m~r.Nemo
 
Регистрация: 27.10.2012
Сообщений: 65

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

<!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>
Чтобы нельзя было крикнуть и перейти на эту же страницу?
Ответить с цитированием
  #2 (permalink)  
Старый 18.01.2019, 23:08
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 594

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

Последний раз редактировалось Malleys, 19.01.2019 в 00:20.
Ответить с цитированием
  #3 (permalink)  
Старый 18.01.2019, 23:59
Аватар для m~r.Nemo
Аспирант
Отправить личное сообщение для m~r.Nemo Посмотреть профиль Найти все сообщения от m~r.Nemo
 
Регистрация: 27.10.2012
Сообщений: 65

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

Последний раз редактировалось m~r.Nemo, 19.01.2019 в 00:07.
Ответить с цитированием
  #4 (permalink)  
Старый 19.01.2019, 18:54
Аватар для m~r.Nemo
Аспирант
Отправить личное сообщение для m~r.Nemo Посмотреть профиль Найти все сообщения от m~r.Nemo
 
Регистрация: 27.10.2012
Сообщений: 65

Malleys,
Сорри, моих познаний недостаточно чтоб разобраться, куда именно вставить?
Ответить с цитированием
  #5 (permalink)  
Старый 21.01.2019, 20:16
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 594

Сообщение от 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>
Ответить с цитированием
  #6 (permalink)  
Старый 15.02.2019, 05:12
Аватар для m~r.Nemo
Аспирант
Отправить личное сообщение для m~r.Nemo Посмотреть профиль Найти все сообщения от m~r.Nemo
 
Регистрация: 27.10.2012
Сообщений: 65

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

Например;

<!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, 15.02.2019 в 18:13.
Ответить с цитированием
  #7 (permalink)  
Старый 17.02.2019, 19:45
Аватар для m~r.Nemo
Аспирант
Отправить личное сообщение для m~r.Nemo Посмотреть профиль Найти все сообщения от m~r.Nemo
 
Регистрация: 27.10.2012
Сообщений: 65

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подсветка элементов страницы по критериям Ramundo Элементы интерфейса 1 27.01.2018 19:58
Подсветка пунктов фиксированного меню при скролле galaktika123 Элементы интерфейса 1 16.12.2017 19:17
Подсветка родительского пункта. Домен на кириллице Andreij45 jQuery 3 02.06.2016 22:19
Выделение активного пункта меню lemoral (X)HTML/CSS 1 13.04.2015 09:18
Связь активного пункта меню с iframe dadada1916 Элементы интерфейса 2 13.12.2010 02:03