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

user_18127624 0
Viewed 65

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 class="link1" href="#box1">First Link</a></p>
        <div class="box1">Div 1 here</div>
    </body>
</html>

css html
2 Answers

Use same id as href, and in css use :target on the id, example:

* {
    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;
}
#box1:target {
    background-color: #008080;
    border: 2px #0e8080;
    color: #ffd700;
}
<p><a class="link1" href="#box1">First Link</a></p>
<div id="box1">Div 1 here</div>

user_178666010

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 class="link1" onclick="change()">First Link</a></p>
        <div class="box1">Div 1 here</div>
    </body>
</html>

user_148071110
Related