Is there a way to change the color of just the most recently clicked anchor element <a>?

Question

Is there a way to change the color of just the most recently clicked anchor element <a>?

I have a sidebar with anchor elements (Link 1,2,3 in my HTML). I want the text color of these anchors to change when clicked. Additionally, I need only one anchor element to be colored at a time, meaning the previous one should return to its normal color. How can I achieve this?

Below is the link to access my HTML code: https://pastebin.com/ew9qXAzH

The following shows the anchor elements in my code:

<div class="sidenav">
  <button class="dropdown-btn">Dropdown1 
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-container">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  <button class="dropdown-btn">Dropdown2 
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-container">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

javascript html css

Answer 1

Answer №1

It seems that the CSS pseudo-class :focus retains the color of the last clicked element until another element is clicked on within the page.

a:focus { color: green; }

<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>

Answer 2

It seems that the CSS pseudo-class :focus retains the color of the last clicked element until another element is clicked on within the page.

a:focus { color: green; }

<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>

Answer 3

Answer №2

There are specific CSS selectors designed for this purpose.

a:link and     a:visited.

The first one applies when the link is in its normal state, while the second one applies when the link is clicked on, like so you can go like >

a:link {
  color: red;
}

a:visited {
  color: green;
}

Additionally, you can utilize a:active, which activates immediately upon clicking the link but reverts to its original color as soon as the click event ends (effect lasts around 0.01 seconds).

Answer 4

There are specific CSS selectors designed for this purpose.

a:link and     a:visited.

The first one applies when the link is in its normal state, while the second one applies when the link is clicked on, like so you can go like >

a:link {
  color: red;
}

a:visited {
  color: green;
}

Additionally, you can utilize a:active, which activates immediately upon clicking the link but reverts to its original color as soon as the click event ends (effect lasts around 0.01 seconds).

Answer 5

Answer №3

To make all the links stand out, I assigned them a class called "highlightLink" and added an onclick event handler "linkSelected()". Here is a snippet of the JavaScript code:

function linkSelected() {
    var links = document.querySelectorAll(".highlightLink"); // get all the links
    links.forEach(link => link.style.fontWeight = "normal"); // set font weight of all links to default (normal)
    event.target.style.fontWeight = "bold"; // set font weight of the clicked link to bold (or any style you prefer)
}

Answer 6

To make all the links stand out, I assigned them a class called "highlightLink" and added an onclick event handler "linkSelected()". Here is a snippet of the JavaScript code:

function linkSelected() {
    var links = document.querySelectorAll(".highlightLink"); // get all the links
    links.forEach(link => link.style.fontWeight = "normal"); // set font weight of all links to default (normal)
    event.target.style.fontWeight = "bold"; // set font weight of the clicked link to bold (or any style you prefer)
}

Is there a way to change the color of just the most recently clicked anchor element <a>?

Answer №1

Answer №2

Answer №3

Similar questions

Using Vuex and array.findIndex but unable to locate a matching element

Each time forEach is called, it increments the previous result by 1

Creating and fetching CSV files using PHP and AJAX

PhoneGap and jQuery prove ineffective in fetching json results from Twitter

Guide to creating a custom wrapper for a Material UI component with React JS

What is the best way to remove an element from an array and add a new one?

Show various error messages depending on the type of error detected

Challenges with exporting dynamically generated divs using jspdf in an Angular 2 project

Tips for managing open and closed components within a React accordion and ensuring only the clicked component is opened

Removing the column name from a JSON return in C# involves using a variety of techniques

Adding a JavaScript widget to a WordPress page

Enhance the functionality of a directive by incorporating the ui-mask directive

Tips for transmitting an array of Objects to AngularJS

Using Jquery Chosen Plugin to Dynamically Populate One Chosen Selection Based on Another

From AJAX response to React state attribute, store the JSON data

The issue with Angular 4 imports not refreshing in a .less file persists

extracting the ID from within an iframe

Struggling to unlock the mystery of a jammed trigger box

Tips for controlling the size of a canvas element: setting minimum and maximum width and height properties

Troubleshooting issues with AngularJS's minDate functionality