Как сделать подобное?

Question

[Дмитрий]

Здравствуйте
При переходе по ссылке на Brown, нужно что бы на ней подсвечивался этот пункт меню. Т.е., делать подсветку текущего пункта на странице. Как такое реализовывать? Желательно native JS. Голова чот не варит вообще, а нужно срочно на завтра)
UPD: Рабочий вариант (нужным ссылкам задать класс link):

var links = document.getElementsByClassName('link');
var linksArr = Array.prototype.slice.call(links);

linksArr.forEach(function(item, linksArr) {
  var location = window.location.href;
	var link = item.href;
	var result = location.match(link);

	if(result != null) {
	  item.classList.add('active');
	}

});

Answer 1

[Archakov Dennis]

$('header .top .profile ul li a[href*="'+location.pathname+'"]').addClass('active');

Это решение не займет лишнего пространства и использовать window.location.href, не есть правильно. Так как во многих сайтах, в качестве адреса используется путь без указа протокола и домена, то есть только путь к разделу. Можно этой одной строчкой решить весь ваш вопрос и код @Huf

location.pathname = "/q/373607" - возвращает только путь к определенному разделу, без протокола и домена.

location.href = "https://toster.ru/q/373607" - возвращает полный адрес.

И правильней, использовать проверку на наличие пути, а не всего адреса.

Вам остается просто создать для ul.menu li a, отдельный класс .active и уже настраивать по вашему желанию.

Comments

[Дмитрий]

Да, с этим я успел ознакомиться. Почему-то при использовании .pathname мне выдавалась пустая строка (делал на локалке). Вариант Александр Коновалов сработал как нужно, только не очень понял почему с jQuery он не сработал, а с native без проблем. Можете подсказать почему так?)

[Archakov Dennis]

Дмитрий: Чуть подробней. Мой вариант Вам не подошел? И чуть подробней про "почему с jQuery он не сработал, а с native".

[Дмитрий]

Im Archakov, ваш вариант не делает абсолютно ничего, ни какой-либо реакции, ни ошибок) И я без понятия почему, ибо по логике работать оно должно. Я переделал предложенный Александр Коновалов код на native JS. И вот как-то так получается, что вариант, переписанный на native работает без проблем, а исходный, на jQuery – нет. Вот этот пример: https://jsfiddle.net/letehaha/gz54j4s7/

Answer 2

[Александр Коновалов]

<script type="text/javascript">
							 $(function () {                             
								$('header .top .profile ul li a').each(function () {     
									var location = window.location.href 
									var link = this.href               
									var result = location.match(link);  
							 
									if(result != null) {                
										$(this).addClass('active');    
									}
								});
							});
</script>

header .top ul.menu li a.active{color:#ffd111}

Comments

[Дмитрий]

Прописал вот так, но почему-то не работает: https://gyazo.com/860ff2978977fa1461e314aef0912b5f

[Александр Коновалов]

Дмитрий:

<div class="profile">

							<?php echo "<div class=\"avatar\"><img src=\"".$steamprofile['avatarfull']."\"></div>";

							echo "<ul><li style=\"width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
\">". $steamprofile['personaname'] ."</li><li style=\"display: inline-block;\"><a href=\"".$lang_menu."settings-page/\">".$msg['setting']."</a></li> <li style=\"display: none; margin-left: 10px;\"><a href=\"".$lang_menu."settings-page/\">Мои победы</a></li></ul>";

							echo "<a href=\"steamauth/logout.php\" class=\"exit\">".$msg['exit']."</a>";
							echo "<a href=\"".$lang_menu."#top\" class=\"togame\" onclick=\"yaCounter35054020.reachGoal('play'); return true;\">".$msg['play']."</a>";?>

Сопоставляйте, дерзайте