Issue with Jquery addclass not activating upon clicking on li element

My menu structure is as follows:

<ul class="menu_bg" id="menu-main-menu">
  <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-653" id="menu-item-653"><a href="http://apptivowp.apptivo.com/" title="Home">Home</a></li>

  <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-650" id="menu-item-650"><a href="http://apptivowp.apptivo.com/artists/" title="Artists">Artists</a></li>

  <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-651" id="menu-item-651"><a href="http://apptivowp.apptivo.com/category/show-dates" title="Show dates">Show dates</a></li>

  <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-649" id="menu-item-649"><a href="http://apptivowp.apptivo.com/gear/" title="Gear">Gear</a></li>
  <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-563" id="menu-item-563"><a href="http://apptivowp.apptivo.com/category/news" title="News">News</a></li>
</ul>

I tried using the following jQuery to add a class when clicking on an li element:

<script type="text/javascript>
jQuery('ul.menu_bg li a').click(function()
{

   jQuery(this)('ul.menu_bg li').addClass('mymenu');
});
</script>

However, the class 'mymenu' is not being applied when I click on the li. Can someone help me identify the issue?

Thank you, Ravi

jquerycss

Answer №1

No need to rewrite the selector, simply do this:

Use jQuery(this).addClass('mymenu');

This code will add the class to the a element. If you want it on the parent li, navigate up the tree first:

$(this).closest('li').addClass('mymenu');

Answer №2

Consider attempting this:

$(document).ready(function(){
    jQuery('#menu-main-menu li a').click(function() {

       $(this).parent().addClass('mymenu');
    });
});

Answer №3

jQuery(this)('ul.menu_bg li').addClass('mymenu');

The statement above may not be accurate.

Consider using jQuery(this).addClass('mymenu');

Answer №4

In agreement with cwolves, there is no need to re-select the item. By using 

jQuery('ul.menu_bg li).click(...)
, you have already targeted the li tag within your list when clicked.

Consequently, you can directly manipulate that specific element: jQuery(this).doWhatYouWant.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for properly utilizing the collapse feature

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popp ...

javascriptjqueryhtmlbootstrap-4

Execute JavaScript code a specified number of repetitions, incrementing the value of each number in the array by 1

This is the HTML structure that cannot be directly changed in the DOM, but can be modified with JavaScript by altering attributes and classes: <div class="parent"> <label class="child" for="label_1"> &l ...

javascriptjqueryarrayssortingarraylist

Steps for dynamically loading the correct pane without having to refresh the header, footer, or left navigation

Looking to create a web application using HTML, Bootstrap, and jQuery that includes a header, footer, left navigation, and right pane. The content of the right pane will be loaded from a separate HTML page based on what is clicked in the left navigation. ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

jQuery used to select elements that are added dynamically on the page

Event Delegation in jQuery is a concept I am well-acquainted with. To listen for events on dynamically added elements, the following syntax is used: $('body .some-class').on('click', '.dynamically_added_ele', function(){}); ...

javascriptjqueryevent-handlingdynamically-generatedevent-delegation

Differences in the way CSS works between Firefox, Chrome, and Internet Explorer

The issue I am currently facing is related to the logo placement on my website. I am trying to make the monster in the logo appear as if it is sitting on the secondary menu, so I implemented the following code: #logo {position:absolute; z-index:20; margin ...

cssinternet-explorergoogle-chromefirefoxcross-browser

Using jQuery to smoothly slide elements off the page

I want to add some animations when the page loads and when a button is clicked. When the page loads, I want a div to slide in from the bottom of the page. And when the user clicks the button, the div should slide off the top of the page before redirecting ...

jqueryajaxjquery-animateslide

Struggling with creating an html file that is responsive on mobile devices

I am currently utilizing bootstrap 4 for the construction of a website. I have encountered an issue where my homepage does not display properly on handheld devices when using Google Chrome's device toggle toolbar. The homepage requires scrolling to vi ...

htmlcssbootstrap-4

Move the aircraft across the display in a lively animation

I need help creating an animation where a plane flies across the screen, exits from the left side, and re-enters from the right side in a continuous loop. How can I achieve this effect to make the plane fly endlessly across the screen? Here is my code: ...

jquerycssanimationjquery-animate

Preserving the scroll position during the loading of images

On my website, I have a page displaying various chat messages which includes both text and images. Whenever the page loads, it automatically scrolls down to the bottom where the latest message is located using the code snippet below: $(cardBody).scrollTo ...

jquery

What could be causing the inconsistency in triggers for the "keypress" event handler?

Help needed with a function I'm working on. The issue is that it doesn't seem to be firing properly. While the function does work, there's an anomaly - when I try to change the quantity value in the form (which defaults to 1), and let's ...

jqueryjquery-ui

What is the best way to dynamically shift the position of an image on a page while keeping it in place in real-time?

A group of friends and I are currently collaborating on an experimental project for a presentation. Our goal is to have multiple elements (such as images, text, gifs) displayed on a page that can be dragged around in real-time using a draggable script whi ...

javascripthtmlcssdraggable

Switching the menu in mobile view: utilizing vue and pug

Hello, I am having trouble toggling my hamburger menu. When I check the console, it shows an error message: "nav is not defined". header.pug header.site-header div.navbar div.navbar__link.navbar--brand logo div.navbar ...

jqueryhtmlvue.jspugtoggle

determining the 'top' and 'right' coordinates upon clicking

I encountered an issue with a table having a drop-down menu that was getting cut off when opened on the last line. After some experimentation, I came up with a solution to detach the drop-down menu from its parent element and then reposition it by setting ...

javascriptjqueryhtmlcss

Challenge encountered when trying to store AngularJS response in a global variable

When making an HTTP call to the controller using angular.js, I am trying to save the response in a global variable like so: app.controller('dashBoardController', ['$scope', '$http', '$location', function ($scope ...

javascriptjqueryangularjshtml

A self-executing JavaScript function

Whenever I click on a , I would like to show a personalized alert, but if I am already logged in, I prefer to be directed to a different page. Here is what I have set up. <div id="contentCalendar" class="col-md-3 images_1_of_4 text-center"> ...

javascriptphpjquery

Why isn't the callback function for setTimout() working as intended?

Can someone explain why setimout(fun(),time) isn't working in this specific scenario? Explanation: This code displays a message and then hides it. I want to add a delay of 2 seconds before hiding the message, but when I try to do so using setTimeout, ...

javascriptjquerysettimeout

Obtaining a single element from a hidden display while dragging using Jquery UI

Is there a way to move an element outside of a container with overflow hidden when using drag and drop functionality in CSS? Currently, when I drag an element with the "item" class, it stays within the confines of the container with overflow set to hidden. ...

jquerycssjquery-uioverflowdraggable

Create vertical bar graphs in amcharts using data retrieved from an ajax API in JSON format

Currently, I am utilizing the amcharts (stacked chart) and I would like to display the values in the stacked chart that I retrieve from a jquery ajax api call (in json format). I have attempted this task but have not been successful. Does anyone have any ...

jqueryjsonajaxapiamcharts

The width of mat-table columns remains static even with the presence of an Input field

I'm currently working on an Angular component that serves the dual purpose of displaying data and receiving data. To achieve this, I created a mat-table with input form fields and used {{element.value}} for regular data display. Each column in the tab ...

cssangulartypescriptangular-materialangular-material-table

Switching from jquery's $.animate to $.velocity is not effective

I have a smooth animation implemented in jQuery for scrolling to a specific element. However, the animation is quite laggy. When I click on it, it smoothly scrolls down to the desired element. $('#aboutMenu').click(function(){ $('html, body ...

jqueryjquery-animatevelocityvelocity.js