when a menu bar item is clicked, all items will display the same background color

Question

when a menu bar item is clicked, all items will display the same background color

When visiting my website, I want the selected menu tab to be highlighted in the color #1B3E70.

The problem is:

Currently, every menu bar item that is clicked on is changing to the background color #1B3E70, instead of just the one selected item. This should not be happening. Only the selected menu item should have the background color #1B3E70.

You can view my site here: http://mywebsite.com/

Click on the menu bar items to see the issue for yourself.

Please provide suggestions on what changes need to be made..?

EDIT: HERE IS JSFIDDLE: http://jsfiddle.net/2s9Zm/1/

javascript jquery html css

Answer 1

Answer №1

Update the JavaScript code as follows:

$(document).ready(function(){
    $('.menu-item a').click(function(){
        $('.menu-item a').removeClass('active');
        $(this).addClass('active');
    });
});

It would be helpful to include a jsfiddle next time.

Answer 2

Update the JavaScript code as follows:

$(document).ready(function(){
    $('.menu-item a').click(function(){
        $('.menu-item a').removeClass('active');
        $(this).addClass('active');
    });
});

It would be helpful to include a jsfiddle next time.

Answer 3

Answer №2

     $('#menu_id').css('background-color', '#1B3E70');

This solution is proven to be effective. If you find it useful, consider marking it as the answer for others to benefit from.

Answer 4

     $('#menu_id').css('background-color', '#1B3E70');

This solution is proven to be effective. If you find it useful, consider marking it as the answer for others to benefit from.

when a menu bar item is clicked, all items will display the same background color

Answer №1

Answer №2

Similar questions

Can a piece of code be created that generates the XPath for a specific element?

Zone.js error: Promise rejection caught

What is the best way to generate the message dynamically?

Populate the table with JSON content using jQuery

Creating a progress bar feature using local storage in JavaScript

Has anyone created a modified version of jRails that is compatible with Rails 2.3 and jQuery 1.4?

Vue: Opening all GmapInfoWindows simultaneously upon clicking one

Validating Data in Laravel with a Single Rule

I am looking for a method to securely utilize Django template variables and URL tags within a JavaScript file, preventing users from inspecting the underlying data and links

Incorporate an internal zoom feature into the product listings on my Big Cartel store

Issue with sending data from JQuery Ajax to PHP codeExplanation:The problem

What is the best way to merge the values of an array within an array of objects with the same property in JavaScript?

Create a sleek transition for your Bootstrap 4 fixed Navbar by having it smoothly slide down and change to a

Pair of dimensions painting with d3 version 4

Using asynchronous functions in JavaScript to push an array does not function correctly

Creating dynamic elements in JavaScript and assigning them unique IDs

Troubleshooting challenges with updating Ajax (SQL and add-ons)

Storing data securely with Firebase: Executing the task 'uploadBytes'

The issue arises when attempting to call a method from the same service within jsPDF in an Angular environment

JavaScript Advanced Filtering techniques