Modify the colors of <a> elements with JavaScript

I am brand new to the world of UI design. I am encountering an issue with a static HTML page.

(Please note that we are not utilizing any JavaScript frameworks in my project. Please provide assistance using pure JavaScript code)

What I would like to achieve is as follows: - When clicking on YAHOO, it should turn orange while Google and Bing remain white - When clicking on GOOGLE, it should turn orange while Yahoo and Bing stay white - When clicking on BING, it should turn orange while Yahoo and Google stay white

1) In my HTML page, I have multiple links, such as:

<a href="www.yahoo.com">Yahoo</a>
<a href="www.google.com">Google</a>
<a href="www.bing.com">Bing</a>

2) I have a CSS file that includes the following:

a {text-decoration: none}
a:link, a:visited {text-decoration: none;color: white;}
a:hover {text-decoration: none; color: #FF9900;}
javascripthtmlcss

Answer №1

EDIT: Function has been edited // Implemented using PURE JS // Checkout the UPDATED FIDDLE

Ensure to include id and onclick attributes for each link:

<a href="#" id="googleLink" onclick="changeColor(this)">Google</a><br />
<a href="#" id="yahooLink" onclick="changeColor(this)">Yahoo</a><br />
<a href="#" id="bingLink" onclick="changeColor(this)">Bing</a>

To change the color, utilize a javascript function:

function changeColor(link) {
document.getElementById(link).className = "activeLink";
if(link == "googleLink"){
  document.getElementById("yahooLink").className = "";
  document.getElementById("bingLink").className = "";
   }
if(link == "yahooLink"){
  document.getElementById("googleLink").className = "";
  document.getElementById("bingLink").className = "";
   }
if(link == "bingLink"){
  document.getElementById("googleLink").className = "";
  document.getElementById("yahooLink").className = "";
   }
}

Apply styling using this css:

.activeLink{
    color: orange;
}
.activeLink:hover{
    color: orange; // *to keep the active link color consistent on mouse hover
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm seeking an easy method to adjust the x and y coordinates of a popup rectangle with a fixed size. Can anyone provide

Is there a way to create a simple pop-up rectangle, possibly using jQuery or a similar tool, that presents a scaled-down canvas view of a larger browser window (1000px x 1600px), allowing users to click and determine the x/y position within the full window ...

javascriptjquerypopup

I need to generate table rows using v-for and include a unique value in the 'id' attribute of each row

I am creating table rows dynamically in a view using Flask data. <tr id="<% file.id %>" v-for="file in fileList"> <td><img class="thumbnail_preview" src=""></td> <td><% file.filename %></td> <td> ...

htmlvue.js

Rectangles on canvas, each with identical dimensions, appear in varying sizes when positioned at different locations

In my canvas, I have created two rectangles using the rect element. Both rectangles are supposed to be 40 units wide and 20 units tall. The first rectangle starts at coordinates 0,0 for its top-left corner, while the second one begins at 60,40. Interesti ...

javascripthtmlhtml5-canvas

A guide to monitoring and managing errors in the react-admin dataProvider

Rollbar has been successfully integrated into my react-admin app to track uncaught errors. However, I've noticed that errors thrown by the dataProvider are not being sent to Rollbar. It seems like errors from the dataProvider are internally handled w ...

javascriptreactjsreact-adminbug-trackingrollbar

Is there a method to enclose a Grafana row with a border?

I recently created a Grafana dashboard using JavaScript and I realized that adding a border around each row would enhance readability. Here is how the current view looks like: https://i.stack.imgur.com/itKYR.png However, it can be difficult to differenti ...

javascriptbordergrafana

Angular SPA Routing for .Net Core 2.0

Having recently created a new Angular SPA project using the .Net core 2.0 SPA templates, I find myself facing some challenges as a newcomer to Angular/Typescript and HMR. While most functionalities were working smoothly at first, I noticed a peculiar issu ...

javascriptangularjsroutes

Maintain selection from the drop-down menu

I have three different pages: register.php, view.php, and edit.php In the edit.php page, I am trying to maintain a dropdown option that defaults to the first option available. Here is a breakdown of my pages: REGISTER.PHP <form id="base" method="po ...

phpjqueryhtml

Exploring nested arrays in JSON through iteration

Here is the JavaScript code I am working on (the "data" variable is retrieved from a json call): if (data.projectReports.length) { for (var i in data.projectReports){ var report = data.projectReports[i]; $('#reports').append( & ...

javascriptjson

The script fails to load when utilizing jquery/ajax

After the page loads, I am attempting to dynamically add a script into a div using ajax/jquery. This particular script is sourced from a CPM network and is responsible for loading a banner. However, when I try to load this script through ajax post-page lo ...

javascriptjqueryajax

Text alignment post-rotation

Whenever I rotate a span, the text inside does not align horizontally. As shown in the example below, we are facing alignment issues with three rotated spans. body{ padding-left:10px; } .bordered{ border-left: 2px solid gray; position: relative ...

htmlcss

Setting multiple cookies with the setHeader method in NodeJs is a powerful capability that allows developers

Currently working on a project using node js, and I've encountered an issue with setting two different cookies. Every time I try to set them, the second cookie ends up overwriting the first one. Check out the code snippet below that I'm currently ...

javascriptnode.jsexpresscookies

Does the height of a block element change based on the font size?

Does the font size of content affect the height of a block element? Let me demonstrate what I'm talking about, take a look at this example fiddle If you enlarge the font size of the class .p within the div, you'll notice that the div's hei ...

htmlcss

Add some text onto the Box Component in Material UI

I am looking to replicate the hover functionality (UI) seen in this example: Desired UI Source: Since adjusting background image styles can be complex, I have opted to use the Box Component from Material UI. Within the Box Component, I have implemented th ...

javascriptcssreactjsmaterial-uijss

Access a specific JSON value using AngularJS

When using AngularJS to read a specific JSON value, I encountered the following issue: $http({method: 'GET', url: urlVersion}). success(function(data, status, headers, config) { console.log("success data " + status); $scope.ext = data.ve ...

javascriptjsonangularjs

Change the default content of the jQuery menu with a content changer

After sharing some base code for a webpage to dynamically change its content based on menu selections, I wanted to showcase the code. Take a look below: HTML: <!DOCTYPE html> <html> <head> <link rel='stylesheet' type=&apos ...

jqueryhtmlmenudefault

Challenges with resizing in Bootstrap

I need assistance with my login form that is appearing in a Bootstrap modal. The modal I am using is the standard size, not the larger one. In the form, there are 2 input fields and a login button on the left side, while the right side should contain other ...

htmlcsstwitter-bootstrap

Utilize the power of Request.JSON to send an HTML array as a post

I have a piece of HTML code that includes form elements: First name: <input type='text' name='first_name' value='' /><br/> Last name: <input type='text' name='last_name' value='' / ...

javascriptajaxarraysjsonmootools

Visit the embedded AJAX feature that is failing to show any results

I've been working on this seemingly simple problem for days now, but I'm still stuck. I have the following Go code... package main import ( "fmt" "net/http" "html/template" "database/sql" _"github.com/mattn/go-sqlite3" ...

htmlajaxgo

When it comes to MongoDB aggregation, the order of indexes is not taken into consideration

To retrieve the 100 latest documents from a MongoDB collection, where each document is a combination of multiple documents with a similar field (in this case timestamp), I have implemented a series of queries using Node.js: return q.ninvoke(collec ...

javascriptnode.jsmongodbmongodb-queryaggregation-framework

Exploring the Power of D3.js: Loading and Visualizing Multiple Networks using JSON Files and the Force

I have a collection of networks consisting of nodes and links stored in various JSON files. I am using D3.js to load them into a Force Layout, where they each load and layout perfectly when loaded individually. However, I would like to enhance the function ...

javascriptjsond3.jssocial-networkingforce-layout