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

Interacting with CSS buttons using Selenium

What is the difference in performance between using element.class { ... } compared to just .class { ... } in CSS?

Steps for activating or deactivating the book in/book out button in an ajax table

Loading texts with the same color code via ajax will reveal there are differences among them

Effortlessly Create a jQuery Page Load Effect with Fade In and Out

Stylish date picker in CSS

Turn off the custom CSS section in the WordPress Customizer for WordPress themes

How can I generate a bounding box with CSS?

Closing the nested accordion will collapse all sections within the accordion

Automatically populate the article number field once the article name has been entered

The output of the jQuery require function does not return a function, but rather an

Is it feasible to automate the cropping process with selenium?

assigning a numerical value to a variable

Having difficulty refreshing the dataTable using the ajax.url.load() function during client-side processing

I'm looking for a way to implement a jQuery-style initialization pattern using TypeScript - how can I

Conceal specific image(s) on mobile devices

Do you know of a more streamlined approach to formatting this SCSS code?

Tips for avoiding overflow while utilizing animations

Having Trouble Retrieving and Updating Records in MS CRM?

Using C# to make an AJAX request