How to use <a> tag to change <div> box color-CodePudding

I'm new to css and html. I want to have a button that could change the color of the div box. I tried using pseudo classes, but it doesnt seem to be working. Here is the sample of the code. How can I make it so when you click the link, it changes the color of the div box.

* {
    box-sizing: border-box;
    font-family: "Arial", sans-serif;
}
p {
    display: inline-block;
}
.link1 {
    background-color: #002147;
    border: 2px #002147;
    color: #ffffff;
    font-size: 1.17em;
    text-decoration: none;
}
div {
    width: 150px;
    height: 200px;
    border: 1px solid #000000;
    font-size: 1.17em;
}
a.link1:visited .box1 {
    background-color: #008080;
    border: 2px #0e8080;
    color: #ffd700;
}

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>1 Button, 1 Box</title>
   </head>
    <body>
        <p><a  href="#box1">First Link</a></p>
        <div >Div 1 here</div>
    </body>
</html>

CodePudding user response：

If there is no specific need for some redirection, don't use a tag, instead use input tag, and go with checkbox or radio. It requires more styling that's true.

* {
    box-sizing: border-box;
    font-family: "Arial", sans-serif;
}

.link1 {
    background-color: #002147;
    border: 2px #002147;
    color: #ffffff;
    font-size: 1.17em;
    text-decoration: none;
}
div {
    width: 150px;
    height: 200px;
    border: 1px solid #000000;
    font-size: 1.17em;
}

input {
  display: none;
}

input:checked ~ label .box1 {
    background-color: #008080;
    border: 2px #0e08080;
    color: #ffd700;
}

<input type="checkbox" id="test">
<label  for="test">First Link
<div >Div 1 here</div>
</label>

CodePudding user response：

With JS. Assign a eventListner to your link. Then create a function which add add a class with a background-color. You can also set style attribute with javascript.

Like that:

function change() {
  const div = document.querySelector('.box1');  
  div.classList.toggle('red-bg');
}

* {
    box-sizing: border-box;
    font-family: "Arial", sans-serif;
}
p {
    display: inline-block;
}
.link1 {
    background-color: #002147;
    border: 2px #002147;
    color: #ffffff;
    font-size: 1.17em;
    text-decoration: none;
}
div {
    width: 150px;
    height: 200px;
    border: 1px solid #000000;
    font-size: 1.17em;
}
a.link1:visited .box1 {
    background-color: #008080;
    border: 2px #0e8080;
    color: #ffd700;
}

a.link1 {
  cursor: pointer;
}

.red-bg {
  background-color: red;
}

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>1 Button, 1 Box</title>
   </head>
    <body>
        <p><a  onclick="change()">First Link</a></p>
        <div >Div 1 here</div>
    </body>
</html>