How to change the picture for the current menu item?

Question

JavaScript

Good afternoon!
I have a navigation bar, let's say it looks like this:

<aside>
        <div id="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">
                <img class="account-img" src="{% static 'main/img/account.svg' %}">
                <span class="navigation_label">Account</span>
            </a><br>
        </div>
    </aside>

Also on the page, a jquery script is connected that assigns the current class to the current menu tab, it looks like this:

const itemMenu = $('#menu a');
         const url = location.pathname;
         itemMenu.each(function (el) {
           if($(this).attr('href') === url) {
             $(this).addClass('current')
           }
         })

I would like the current menu page with the current class to change the image, but for each menu item it changes to a different individual image, for example:

If we are on the "orders" page, then the image with src="{% static 'main/img /orders.svg' %}"> changed to src="{% static 'main/img/orders_number_2.svg' %}">, and if we are on the "home" page, then the picture src="{% static ' main/img/home.svg' %}" would change to another appropriate picture for this page e.g.
src="{% static 'main/img/home_img_numer_5.svg' %}" and so on when navigating through other menu items

Like me can i do it? I would be grateful if you could help me with an example

Answer 1

Put just two pictures, styles: one is visible if there is a current class, the other is not