Clicked on an element which has href attribute, then change another elements style in javascript, ho-CodePudding

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  href="#a">a</a>
            <a  href="#b">b</a>
            <a  href="#c">c</a>
        </nav>
    </header>

    <main>
        <div id="a">
            aaa
        </div>

        <div id="b">
            bbb
        </div>

        <div id="c">
            ccc
        </div>

    </main>
    <script src="./x.js"></script>
</body>
</html>

CodePudding user response：

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  href="#a">a</a>
            <a  href="#b">b</a>
            <a  href="#c">c</a>
        </nav>
    </header>

    <main>
        <div id="a">
            aaa
        </div>

        <div id="b">
            bbb
        </div>

        <div id="c">
            ccc
        </div>

    </main>

CodePudding user response：

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

https://jsfiddle.net/kenpy/hzakqv8o/70/