The art of precise JQuery selection

Question

The art of precise JQuery selection

I have a menu that changes dynamically. I want to be able to highlight the clicked item in the menu when someone clicks on it.

$("#my_menu > li").click(function(){
   var clickedId = $(this).attr('id');
   $("#" + clickedId).css("font-weight", "bold");
   $("#" + clickedId).css("background-color", "#E0E0E0");
   $('#navigation_submenu').show(); //this is not important
});

However, I also need to revert the other menus back to their initial state once one has been clicked. Can anyone help me with this? Thank you!

jquery css selection

Answer 1

Answer №1

To achieve this, it is recommended to use the addClass() and removeClass() functions like so:

Start by creating a CSS class for the active items:

.active {
   font-weight:bold;
   background-color:#E0E0E0;
}

Next, implement the following JQuery code:

$("#my_menu > li").click(function(){
   //Remove current active item
   $("#my_menu > li").removeClass('active');
   //Add 'active' class to the clicked element
   $(this).addClass('active')   
});

For a live demonstration, you can view this Demo Fiddle

Answer 2

To achieve this, it is recommended to use the addClass() and removeClass() functions like so:

Start by creating a CSS class for the active items:

.active {
   font-weight:bold;
   background-color:#E0E0E0;
}

Next, implement the following JQuery code:

$("#my_menu > li").click(function(){
   //Remove current active item
   $("#my_menu > li").removeClass('active');
   //Add 'active' class to the clicked element
   $(this).addClass('active')   
});

For a live demonstration, you can view this Demo Fiddle

Answer 3

Answer №2

Is it something like this example?

Styling with CSS

li.active
{
    font-weight: bold;
    background-color: #E0E0E0;
}

Adding functionality with JavaScript

$("#my_menu > li").on("click", function()
{
    $("#my_menu > li").removeClass("active");
    $(this).addClass("active");
});

Answer 4

Is it something like this example?

Styling with CSS

li.active
{
    font-weight: bold;
    background-color: #E0E0E0;
}

Adding functionality with JavaScript

$("#my_menu > li").on("click", function()
{
    $("#my_menu > li").removeClass("active");
    $(this).addClass("active");
});

Answer 5

Answer №3

Try using a CSS class named "selected" instead.

$('.selected').removeClass('selected');
$(this).addClass('selected');

Don't forget to define your CSS class with the desired styling.

Update: Oops, it looks like others have already provided a similar solution.

Answer 6

Try using a CSS class named "selected" instead.

$('.selected').removeClass('selected');
$(this).addClass('selected');

Don't forget to define your CSS class with the desired styling.

Update: Oops, it looks like others have already provided a similar solution.

The art of precise JQuery selection

Answer №1

Answer №2

Answer №3

Similar questions

Using Jquery to append a selector to an object that has already been selected

The absence of underlines for <a href> and <u> is causing an issue

Displaying a list of terms and their corresponding definitions side by side

Mastering the Art of Absolute Positioning in HTML Tables' Header Row

The functionality of Jquery is successfully integrated into a specific function, however it seems to only work for one of the calls. To make the other call work,

What could be causing ngInfiniteScroll to not work properly with tables?

The issue persists with multiple instances of Swiper js when trying to use append and prepend functions

Strategies for integrating a username-only login using Firebase without requiring a password or email address

activated by selecting a radio button, with a bootstrap dropdown menu

Incorporate characteristics into a text box using jQuery

Having trouble adjusting the vertical position of jQuery Spinner buttons

Alter the color of the text when hovering over it, only in the area where the

Adding and removing classes in NativeScript: A step-by-step guide

Tips for adjusting image size to take up only half of the screen in NextJS

What is the best way to ensure that the sidebar appears after the content on mobile devices, even when there are full-width blocks within

Assigning an alternating class to each consecutive chat message, while ensuring that all messages share the same class

Element imitating the edge of the screen extending to the edge of the container

Display a button that allows the header to slide down after sliding

Alignment of Bootstrap thumbnails in a horizontal layout

Peruse the written content and implement it within a div element