Как изменять иконку в меню при переходе на страницу?

Question

[Enter_a_nickname]

Добрый день! У меня есть вертикальное меню с иконками расположенными слева от ссылки на страницу. Мне необходимо менять иконку на другую если пользователь перешел на данную страницу. Как это можно сделать?

Answer 1

[Alexander3928]

Если на JS, тогда обратится к элементу img и при клике менять ему src

Comments

[Enter_a_nickname]

Посмотрите код js под следующем ответе в комментарии, подскажите где ошибся?

Answer 2

[wadowad]

На абстрактный вопрос приведу абстрактный ответ на jquery. Может кому пригодится подсветка классом активного пункта первого уровня в меню при "человекопонятных" урл:

let url = location.href;

	if (url.slice(-1) == '/') url = url.slice(0, -1);
	$($('#menu').children().get().reverse()).each(function() {
		let link = $(this).children('a').first().attr('href');
		if (link.slice(-1) == '/') link = link.slice(0, -1);

		if (link && url.indexOf(link) === 0) {
			$(this).addClass('current');

			self.current = true;
		}
	});

Comments

[Enter_a_nickname]

Здравствуйте! Подскажите пожалуйста в моем случае, как подсветить классом активного пункта?
Если допустим мой html:

<aside>
        <div class="menu">
            <a href="{% url 'home' %}" class="home">
                <img class="home-img" src="{% static 'main/img/home.svg' %}">
                <span class="navigation_label">Home</span>
            </a><br>
            <a href="{% url 'orders' %}" class="orders">
                <img class="orders-img" src="{% static 'main/img/orders.svg' %}">
                <span class="navigation_label">Orders</span>
            </a><br>
            <a href="{% url 'account' %}" class="Account">
                <span class="navigation_label">Account</span>
            </a><br>
        </div>
    </aside>

В таком случае мой jquery выглядит так?

let url = location.href;

  if (url.slice(-1) == '/') url = url.slice(0, -1);
  $($('#menu a').children().get().reverse()).each(function() {
    let link = $(this).children('a').first().attr('href');
    if (link.slice(-1) == '/') link = link.slice(0, -1);

    if (link && url.indexOf(link) === 0) {
      $(this).addClass('current');

      self.current = true;
    }
  });

Где ошибся? при добавлении в css ничего не меняется:

.current{
  background: red;
}