Clicked on an element which has href attribute, then change another elements style in javascript, how to do that?
Question
Here I want to keep all the div to be invisible first. Then when I click on an 'a' tag, there is href attribute to take me on a div, I want to make that div visible only by setting display block or something. How can I do that?
Here i can not figure out how to connect that href to the div id I want to make visible. Please help me if possible.
const divs = document.getElementsByClassName('options'); divs.forEach(element, () => { element.style.display = "none"; }); console.log(x)
.hide{ display: none; }.show{ display: block; }.div{ height: 50vh; width: 50vw; margin: 20px; padding: 20px; background-color: #abcdef; border: 1px solid black; /* display: none; */ }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>doc</title> <link rel="stylesheet" href="x.css"> </head> <body> <header> <nav> <a class="options" href="#a">a</a> <a class="options" href="#b">b</a> <a class="options" href="#c">c</a> </nav> </header> <main> <div class="div"id="a"> aaa </div> <div class="div"id="b"> bbb </div> <div class="div"id="c"> ccc </div> </main> <script src="./x.js"></script> </body> </html>
2 answers
solution1
0 2022-09-15 19:48:24
I think this is what you are trying to achieve:
const nav = document.querySelector('nav') nav.addEventListener('click', (e) => { const element = document.getElementById(e.target.innerText) element?.classList.remove('hide') })
.hide{ display: none; }.div { height: 50vh; width: 50vw; margin: 20px; padding: 20px; background-color: #abcdef; border: 1px solid black; /* display: none; */ }
<header> <nav> <a class="options" href="#a">a</a> <a class="options" href="#b">b</a> <a class="options" href="#c">c</a> </nav> </header> <main> <div class="div hide"id="a"> aaa </div> <div class="div hide"id="b"> bbb </div> <div class="div hide"id="c"> ccc </div> </main>solution2
0 2022-09-15 20:18:20
This is what I understood of your question that might give you what you need:
getElementsByClassName with the div class
const divs = document.getElementsByClassName('div');
create a function that will iterate thru your divs array and will hide them all
function vanish() {
for (let i = 0; i < divs.length; i++) {
divs[i].style.display = "none";
}
}
Call function the 1st time to start with divs hidden
vanish();
Now get all options by class name options
const options = document.getElementsByClassName('options')
Now iterate thru your options array and add your addEventListener inside
for (let i = 0; i < options.length; i++) {
options[i].addEventListener('click', (e) => {
vanish();//This will hide all other elements so that it will display only the one you selected
const element = document.getElementById(e.target.innerText)
element.style.display = "block";//display the one you selected
})
}
a working example
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.