Changing the Style Sheets on the Fly

Question

Changing the Style Sheets on the Fly

I have designed a grid of 5x5 boxes. My goal is to be able to click on a link and have that specific link change color after it has been clicked (a:visited) - one at a time. Unfortunately, my current code changes the color of all the links instead of just the one that was clicked on.

Here is the HTML code:

<ul id="rowOne" class="center">
    <li><a href="#">$100</a></li>
    <li><a href="#">$100</a></li>
    <li><a href="#">$100</a></li>
    <li><a href="#">$100</a></li>
    <li><a href="#">$100</a></li>
</ul>

This is the Jquery code I am using:

$('a').click(function(){
$.each('a').css({'color':'#002290'});
});

Does anyone have any suggestions or solutions?

jquery css dynamic hyperlink

Answer 1

Answer №1

Your code specifies that when any <a> tag is clicked, it should iterate over all existing <a> elements using $.each..., and then adjust their CSS styles. However, the desired behavior is to only modify the CSS of the element that was clicked. This can be achieved by accessing the clicked element through the this keyword in jQuery's event handler:

$('a').click(function(){
  $(this).css({'color':'#002290'});
});

In addition, you can simplify the object creation by omitting the quotation marks around the key (color) if it does not contain hyphens:

$(this).css({color: '#002290'});

If you are setting a single attribute, you can also skip creating an object entirely by passing the property name and value as separate string parameters:

$(this).css('color', '#002290');

Answer 2

Your code specifies that when any <a> tag is clicked, it should iterate over all existing <a> elements using $.each..., and then adjust their CSS styles. However, the desired behavior is to only modify the CSS of the element that was clicked. This can be achieved by accessing the clicked element through the this keyword in jQuery's event handler:

$('a').click(function(){
  $(this).css({'color':'#002290'});
});

In addition, you can simplify the object creation by omitting the quotation marks around the key (color) if it does not contain hyphens:

$(this).css({color: '#002290'});

If you are setting a single attribute, you can also skip creating an object entirely by passing the property name and value as separate string parameters:

$(this).css('color', '#002290');

Answer 3

Answer №2

It is essential to perform the following actions -

$('a').click(function(){
   $(this).css({'color':'#002290'});
});

Answer 4

It is essential to perform the following actions -

$('a').click(function(){
   $(this).css({'color':'#002290'});
});

Answer 5

Answer №3

Make sure to update the a tags with this code snippet: Remember to clear any existing tag colors before a new one is clicked.

$('a').click(function(){    
   $('a').css('color', '');           
   $(this).css({'color':'#002290'});  //current tag
});

Answer 6

Make sure to update the a tags with this code snippet: Remember to clear any existing tag colors before a new one is clicked.

$('a').click(function(){    
   $('a').css('color', '');           
   $(this).css({'color':'#002290'});  //current tag
});

Changing the Style Sheets on the Fly

Answer №1

Answer №2

Answer №3

Similar questions

Updating comment content using Ajax

An unrecoverable error has occurred in the SetForm function: PHPMailer::SetForm() method is not defined

Issue with JQuery Ajax: Some users experiencing failure with ajax requests (response code 0)

Using HelloJS and AngularJS for an asynchronous call to the login function with oAuth

Generating HTML widgets dynamically with jQuery: A step-by-step guide

Is it possible for the upload form submission to wait until the file processing is finished?

What key element is not included in this code?

The alert box for model validation summary errors is deactivated when hidden using .hide() method

Using Google Fonts with AMP and Ruby on Rails: A Challenging Task

Replacing inline CSS with styled components in Next.js Sass modules

What is the best way to extract multiple variables from a function in JavaScript?

Concealing an element using Jquery's Ajax upon successful request

Exploring the Intersection of jQuery and Rails in Dynamic Form Development

Issues with SocketIO message reception in JavaScript

Convert JSON data into an HTML table with custom styling

Craft a FormType showcase using the dynamic duo of Ajax and Jquery

The anchor tag seems to be malfunctioning within the div container

"Function.click operates successfully when no arguments are given, but encounters issues when arguments are supplied

Error: Unexpected character encountered

Is it possible to return PHP parser errors as JSON data?