Using JQuery and CSS to handle multiple hyperlink links with a single action

Question

Using JQuery and CSS to handle multiple hyperlink links with a single action

UPDATE: Issue resolved, thanks for the help. It is working fine now: http://jsfiddle.net/c3AeN/1/ by Sudharsan

I have multiple links on my webpage, all in a similar format like this: note: When I say 'similar format', I mean that all links share the same class but have different IDs and text.

$(".do_it").click(function(){
 // In this function, I extract the ID from the clicked link and redirect to the corresponding website
}

<a href="#" class="do_it" id="999">link1</a>
<a href="#" class="do_it" id="998">link2</a>
.
.
.

<a href="#" class="do_it" id="1">link999</a>

There are specific actions based on the ID, and the issue arises when one link is clicked, turning all links purple. Is there an easy solution to only apply the 'purple' style to the clicked link? //Apologies for any language errors

javascript jquery html css

Answer 1

Answer №1

To ensure consistency in your website's design, style the visited links to be the same color as the regular links using CSS.

a {
    color: #00f;
}
a:visited {
    color: #00f;
}
.visitedLink {
    color: #f00; /* define your desired color here */
}

To apply the custom color on a visited link when clicked, create a class with the desired color and use jQuery to add it dynamically:

$(".mylink").click(function() {
    $(this).addClass("visitedLink");
    // include additional code here
});

Answer 2

To ensure consistency in your website's design, style the visited links to be the same color as the regular links using CSS.

a {
    color: #00f;
}
a:visited {
    color: #00f;
}
.visitedLink {
    color: #f00; /* define your desired color here */
}

To apply the custom color on a visited link when clicked, create a class with the desired color and use jQuery to add it dynamically:

$(".mylink").click(function() {
    $(this).addClass("visitedLink");
    // include additional code here
});

Answer 3

Answer №2

To create unique links, make sure to assign a different href for each one:

<a href="#apple">Apple</a><br>
<a href="#banana">Banana</a><br>
<a href="#orange">Orange</a><br>
<a href="#grape">Grape</a><br>

Note: Avoid using onclick handlers that return false as it prevents the link from being visited. However, without this, scrolling may reset to the top of the page with each click.

Answer 4

To create unique links, make sure to assign a different href for each one:

<a href="#apple">Apple</a><br>
<a href="#banana">Banana</a><br>
<a href="#orange">Orange</a><br>
<a href="#grape">Grape</a><br>

Note: Avoid using onclick handlers that return false as it prevents the link from being visited. However, without this, scrolling may reset to the top of the page with each click.

Answer 5

Answer №3

You don't need to use jquery for this task, you can achieve it using just CSS like so:

a:visited{
  color : purple; // choose any color
}

Additionally, here is a complete example:

a {
    color: blue;
    text-decoration: underline;
}

a:active {
    color: yellow;
    text-decoration: none;
}

a:link {
    color: blue;
    text-decoration: underline;
}

a:visited {
    color: purple;
    text-decoration: none;
}

a:focus {
    color: red;
    text-decoration: none;
}

a:hover {
    color: red;
    text-decoration: none;
}

Answer 6

You don't need to use jquery for this task, you can achieve it using just CSS like so:

a:visited{
  color : purple; // choose any color
}

Additionally, here is a complete example:

a {
    color: blue;
    text-decoration: underline;
}

a:active {
    color: yellow;
    text-decoration: none;
}

a:link {
    color: blue;
    text-decoration: underline;
}

a:visited {
    color: purple;
    text-decoration: none;
}

a:focus {
    color: red;
    text-decoration: none;
}

a:hover {
    color: red;
    text-decoration: none;
}

Answer 7

Answer №4

a.do_it:visited{
  text-decoration:underline;
  color : #800080;
}

Answer 8

a.do_it:visited{
  text-decoration:underline;
  color : #800080;
}

Using JQuery and CSS to handle multiple hyperlink links with a single action

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the process of converting a string to XML in jQuery versions 1.3 and earlier? Additionally, how can you append a node to an

Popup showing values that are not defined

Is it possible for Vue Router to remember the scroll position on a route and return to the same position when navigating back?

Steer clear of using inline styling when designing with Mui V5

jQuery AJAX Triggered Only Once in Callback Function

Adjust the angle of an object precisely using a transform upon hovering over a designated button

Tips for adjusting the height of a fixed-size child element on the screen using only CSS and JavaScript restrictions

What is the process for turning off deep imports in Tslint or tsconfig?

What causes JavaScript parseFloat to add additional value in a for loop implementation?

PHP code to insert a advertisement div after every 5 rows of results

Table that can be scrolled through

Ways to eliminate empty values from an array in JavaScript

implementing a vertical separator in the main navigation bar

Tips for guaranteeing that functions within .then() are finished before moving on

I'm curious if it's possible to perform background tasks using React Native Expo with the example I have in mind

Is it necessary to insert a thread sleep in HtmlUnit before clicking a button?

When the AJAX function is successfully completed, proceed with another operation

How about checking the memory usage in Javascript?

Can you confirm the mobile type, please? Using JavaScript to display a div only once based on the mobile type

"Uncaught ReferenceError: $ is not defined - $function()" error in JavaScript/jQuery