Добрый день!
У меня есть панель навигации, предположим, что она выглядит следующим образом:
<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>
Так же на странице подключен jquery скрипт который присваивает класс current к текущей вкладке меню, он выглядит так:
const itemMenu = $('#menu a');
const url = location.pathname;
itemMenu.each(function (el) {
if($(this).attr('href') === url) {
$(this).addClass('current')
}
})
Я бы хотел чтобы у текущей страницы меню с присвоенным классом current изменялась картинка, но для каждого пункта меню изменялась на другую индивидуальную картинку, например:
Если мы находимся на странице "orders", то картинка с src="{% static 'main/img/orders.svg' %}"> менялась на src="{% static 'main/img/orders_number_2.svg' %}">, а если мы находимся на странице "home", то картинка src="{% static 'main/img/home.svg' %}" изменилась бы на другую соответствующую картинку для данной страницы например
src="{% static 'main/img/home_img_numer_5.svg' %}" и так далее при переходе по другим пунктам меню
Как я могу это сделать? Буду благодарен если поможете примером
