Utilizing JavaScript to assign a CSS class to an <li> list item

Question

Utilizing JavaScript to assign a CSS class to an <li> list item

I am working on a page that includes a menu feature:

When a menu button is clicked, the color changes and I need to retain this color even after the page is reloaded:

$('[id*="button"]').click(function() {
    $('.topmenu-ul li').removeClass();
    $(this).addClass('topmenu-selected' + $('a', this).attr('class'));
});

Additionally, I want to maintain the highlight on the submenu link when the corresponding page loads. For example:

https://i.sstatic.net/FF7oZ.png

Essentially, I am looking to change the class of the submenu li similar to the main buttons, like this:

$('#redbutton').addClass('topmenu-selectedred');
$('.topmenu-tab-appointments').show();

Any suggestions or guidance on achieving this would be highly appreciated!

javascript jquery css menu highlight

Answer 1

Answer №1

I took a shot at answering your question and created a JSFiddle for you to check out. I also made some adjustments to your code by adding the following method:

$('ul > li > a').click(function() {
    if(!$(this).hasClass("parent")) {
       $(this).css('color','blue');
       $(this).parent().siblings().children().css('color','green');
    }
});

Check out the updated code on JSFiddle

Answer 2

I took a shot at answering your question and created a JSFiddle for you to check out. I also made some adjustments to your code by adding the following method:

$('ul > li > a').click(function() {
    if(!$(this).hasClass("parent")) {
       $(this).css('color','blue');
       $(this).parent().siblings().children().css('color','green');
    }
});

Check out the updated code on JSFiddle

Utilizing JavaScript to assign a CSS class to an <li> list item

Answer №1

Similar questions

The arrows on the Slick Slider appear cropped on ios devices like the iphone 8, however, they display perfectly when tested on Chrome and Firefox

Display or conceal image based on date

Is it possible to utilize various return values generated by a regex?

jQuery and CSS3 for importing and customizing text files

Javascript window.scroll function malfunctioning in some browsers while running in localhost

Angular component equipped with knowledge of event emitter output

Adjust the dimensions of the dropdown menus

Execute the strace command using the child_process module in Node.js

Working with AngularJS $resource: including an array element in paramDefaults

Ascending with Progress Indicator Slider

Use Vue.js to display a class when the input is invalid and not empty

Challenges faced with password hashing in Express.js

What is the best way to verify that a JSON key contains only distinct values within a JSON document using JavaScript?

Are there any available npm modules for accurately tallying the total word count within a document saved in the .doc or .doc

Chaining promises: The benefits of attaching an error handler during Promise creation versus appending it to a variable containing a promise

Unable to trap error using try-catch block within an asynchronous function

Tips for creating a responsive background image that adjusts after resizing the window to a certain width

How do I ensure that in Vue.js, the select element always has the first option selected even when other options are dynamically shown or hidden?

Updating Cart Array in Angular 4 when Adding a New Item

Automatically Scrolling Div According to its Content