单击时更改锚点的颜色？

Question

Noob here. I have these 3 buttons type anchors and I want to change their color when they are clicked. I'm almost there but the thing is when the color changes if you click elsewhere in the page the color goes back to original color.

Here is my code. and I believe to fulfill the requirements javascript will be needed so I'm giving it a javascript tag.

 .button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } .button:active { background: red; } .button:focus { background: red; } 

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

Answer 1

add this to ur css

.button:visited{
    background: blue;
}

all links clicked will change color

More info here link

 .button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } .button:active { background: red; } .button:focus { background: red; } .button:visited { background: blue; } 

 <a href="#/test3" class="button">Link 1</a> <a href="#/test2" class="button">Link 2</a> <a href="#/test" class="button">Link 3</a> 

Answer 2

Try this js code

 var links = document.getElementsByTagName('a'); for (var i = 0; i < links.length; i++) { links[i].onclick = function() { this.style.backgroundColor = "red"; } } 

 .button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } .button:active { background: red; } .button:focus { background: red; } 

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

Answer 3

I think you are looking for this: https://www.w3schools.com/howto/howto_js_active_element.asp

This will add active class to the button (you can simply change that to your a tags) you clicked on. Even after you will click elsewhere on the screen.

Hope it solved it, and good luck!