Using jQuery to apply the "a" class with the addClass method

Question

Using jQuery to apply the "a" class with the addClass method

The html structure below is giving me trouble:

<div class="sub">
       <a href="#" id="people">People</a>
</div>

The CSS for the "a" element is as follows:

color:#999999;
font-size:31px;

I am attempting to use jQuery to change the color by adding a class "active" with the style "color:#777!important;", but my current approach is not working. I have tried the following code:

$('.sub').click(function() {
                $('a#people').addClass('active');
            })

However, it does not seem to be functioning as expected. I have also attempted to add the class using this code:

$('.sub a').addClass('active');

If anyone has any suggestions on how to properly add a class to an "a" element, I would greatly appreciate it.

Thank you.

jquery css addclass

Answer 1

Answer №1

Your current solution seems to be accurate: view it in action here. If you're encountering issues, there may be other factors at play that we are not aware of.

Answer 2

Your current solution seems to be accurate: view it in action here. If you're encountering issues, there may be other factors at play that we are not aware of.

Answer 3

Answer №2

The current solution you have is functioning correctly. You can view it here:

http://jsbin.com/oweye/edit

It seems that the issue might be due to not wrapping the click assignment within a document ready function, as shown below:

$(document).ready(function() {

    $('.sub').click(function() {
      $('a#people').addClass('active');
    });
 });

If this step was not followed, the handler may be assigned before the element exists. I have also made modifications to the colors in your CSS to enhance the effect.

Answer 4

The current solution you have is functioning correctly. You can view it here:

http://jsbin.com/oweye/edit

It seems that the issue might be due to not wrapping the click assignment within a document ready function, as shown below:

$(document).ready(function() {

    $('.sub').click(function() {
      $('a#people').addClass('active');
    });
 });

If this step was not followed, the handler may be assigned before the element exists. I have also made modifications to the colors in your CSS to enhance the effect.

Using jQuery to apply the "a" class with the addClass method

Answer №1

Answer №2

Similar questions

Unchecking the select-all checkbox in Ag-Grid after updating the row data using an external button

Is it possible to divide a column in an HTML table into two separate

The left margin class in Bootstrap seems to be having trouble functioning properly within a React

Adding graphs dynamically to Dygraphs allows for real-time updates and interactive data

Retrieving server information using AJAX in React

Depressed tomato ( Using the Image .load method with jQuery )

A mysterious underscore suddenly materializes within Font Awesome icons when used in HTML

first item's grandchild selection

Determine the number of visible li elements using jQuery

Adding a contact form to a slider: A step-by-step guide

Bootstrap modal not displaying in full view

Combine two JSON objects which share a common attribute

There appears to be a CSS problem cropping up on the right side of my website

When you click the "Select All" button in a JavaScript dialogue box, all of the checkboxes on the main page will automatically be selected

Continuously executing a series of JQuery functions or iterating through them repeatedly

How can I make a CSS transition activate only on width increases, not decreases?

Using Twitter Bootstrap to set a minimum number of lines for thumbnail captions

Utilizing interpolation for a CSS class defined in an external file within Angular 2

Verifying PHP session through AJAX

Altering data in a concealed dynamic HTML form