I've successfully utilized jQuery to create sequential numbering for my menu items.
Upon clicking, the hyperlink text changes color to red. However, I'm facing an issue where I want the corresponding number to also change to red when the hyperlink is clicked and active.
For example, clicking on 'WHY YOU NEED IT' turns the text red perfectly. But I'm looking to have the background color of number 1 change to red as well.
I attempted to switch classes but it didn't produce the desired result.
Below is the provided JavaScript code:
jQuery(function ($) {
$(".menu-solutions-menus-container ul li").each(function (i, el) { $(this).children('a').prepend("<number>" + (i + 1.) + "</number>");
});
$('.local-scroll').click(function (event) {
event.preventDefault();
var full_url = this.href;
var parts = full_url.split('#');
var trgt = parts[1];
var target_offset = $('#' + trgt).offset();
var target_top = target_offset.top;
$('html, body').animate({
scrollTop: target_top
}, 500);
});
$('.menu-solutions-menus-container a').click(function () {
$('.menu-solutions-menus-container a').removeClass('active');
$(this).addClass('active');
});
$('.number').click(function () {
$('.number').removeClass('active');
$(this).addClass('active');
});
I'm particularly interested in implementing this feature on the secondary menu of this website.
Thank you in advance for your help.