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

I am curious as to why the "default + label" pseudo-class is not functioning properly on the "input" element. Specifically, I am having trouble with the "+ label" portion

Troubleshooting: My jQuery script for fading in content upon document ready is not

Hold on until the page is reloaded: React

Efficiently sending VueJS data to a separate script

Issue with jQuery behaving unexpectedly during Ajax requests

Validate the checkbox with Vuelidate only when the specified property is set to true

Utilizing Regular Expressions in JavaScript to extract packages from an Android manifest document

Having trouble with the JSFiddle dropdown button that is unresponsive to

What is the name of this JavaScript function declaration syntax? (var) => {}

Center a vertically aligned element following a heading, with the content dynamically generated and enclosed in a fixed container

Can you show me the steps to incorporate a fade-in effect?

How to interact with AngularJS drop-down menus using Selenium in Python?

Providing parameters to a helper function in one class which invokes a method in another class

How can I ensure that my HTML form inputs are consistently displayed in the browser when using jQuery/AJAX and SQL queries without needing to

What is the best way to move information from one table to a different one?

The UI router experiences a crash and requires a refresh after precisely six clicks

Node.js Binary Search Tree - Error: Identifier Not Found

Assign the default value of a Vue prop to the options of its parent component

Puppeteer: Easier method for managing new pages opened by clicking a[target="_blank"]; pause for loading and incorporate timeout controls

The NodeJS server encountered an issue when attempting to load the JavaScript modules