HTML, CSS + JS. How can I add certain styles to the clicked element, and a different style to the un-clicked element. see descri

Question

Overall, it’s about active button, and page at the same time. When button x is active, page x is active too, and they get a style different than the other btns, and pages.

<button> a </button>
<button> b </button>
<button> c </button>

<div> page a </div> (x3)

How can accomplish this:

when button “a” is clicked, button “a” gets style X, and page “a” gets style Y. The other btns and pages don’t (or do) get a style.

Similar situation when the other buttons are clicked.
I’ve started the code here:

https://code.sololearn.com/WZKWh2c4hBpc/?ref=app

Answer 1

Ginfio This is a nice question, and has a nice answer :))

Check out the corrected code :

https://code.sololearn.com/WsjkVOGcx1Oq/?ref=app

Answer 2

Normally we use JavaScript for element control, sometime we can use css only.

Check this out.

https://code.sololearn.com/WckzRCX2jMda/?ref=app

Answer 3

I think you should use css for that. By use
:link{ background-color: ;
Color: ;}
:active{ }
:hover{ } and
:visited{ }
Link is for links yet to be visited.
Active for already visited links.
Hover for highlighted links.
And visited for already visited links.
I hope this would be helpful bro.

Answer 4

Thanks y’all.

Answer 5

Calviղ is that the same as click event listener?
It doesn’t really matter, but ... i’m just wonderin

Answer 6

Ginfio Same effect in this case.