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

"Utilizing jQuery to Connect with Google's Services

Unable to alter Mui input label color upon focus using theme.ts

How to Add a Responsive Inset Transparent Overlay to Images without Using JavaScript?

What is the best method for retrieving text from the aria-label attribute?

Ways to minimize an array of objects by shared key values?

Add a variety of input values to a div in designated spots

What is the best method for eliminating underscores from text that is hyperlinked in a locally hosted HTML file?

Submitting an intricate item to a WCF REST API using JQuery

One-of-a-kind Version: "Utilizing CSS to Capitalize an

Having issues with jQuery Ajax not properly sending date values

Using Javascript to attach <head> elements can be accomplished with the .innerHTML property, however, it does not work with XML child nodes

What causes a horizontal line to form when a user enters white space?

Jquery is not displaying the background color of the progress bar

Why do some button clicks not trigger a page refresh in JavaScript?

Is it necessary to re-specify the parent when using the not selector?

JavaScript comparing variables to nested object properties

What method can I use to adjust the font style when it overlays an image?

Customize the Underline Color in MaterialUI Select Component

Attach a button and arrow to the cursor while it is hovering

Switch the visibility of an HTML input styled as a "spinner"