How to change the icon in the menu when going to the page?

Question

css

Good afternoon! I have a vertical menu with icons located to the left of a page link. I need to change the icon to another if the user has moved to this page. How can I do that?

Answer 1

If in JS, then it will refer to the img element and change its src when clicked

Answer 2

I will give an abstract answer to an abstract question in jquery. Maybe someone will need to highlight the class of the active item of the first level in the menu with "human-understandable" URLs:

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;
    }
  });