單擊一個具有href屬性的元素，然后在javascript中更改另一個元素樣式，怎么做？

Question

在這里，我想首先保持所有 div 不可見。 然后，當我單擊“a”標簽時，會有 href 屬性將我帶到一個 div 上，我只想通過設置顯示塊或其他東西來使該 div 可見。 我怎樣才能做到這一點？

在這里，我無法弄清楚如何將該 href 連接到我想要顯示的 div id。 如果可能，請幫助我。

 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>

Answer 1

我認為這就是您要實現的目標：

 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>

Answer 2

這就是我對您的問題的理解，它可能會為您提供所需的東西：

getElementsByClassName與div class

const divs = document.getElementsByClassName('div');

創建一個 function 它將遍歷您的 divs 數組並將它們全部隱藏

function vanish() {
  for (let i = 0; i < divs.length; i++) {
    divs[i].style.display = "none";
  }
}

第一次調用 function 開始隱藏 div

vanish();

現在通過 class 名稱options

const options = document.getElementsByClassName('options')

現在遍歷您的選項數組並在其中添加您的addEventListener

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
  })
}

一個工作示例

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

單擊一個具有href屬性的元素，然后在javascript中更改另一個元素樣式，怎么做？

問題描述

2 個解決方案

解決方案1
0 2022-09-15 19:48:24

解決方案2
0 2022-09-15 20:18:20

單擊一個具有href屬性的元素，然后在javascript中更改另一個元素樣式，怎么做？

問題描述

2 個解決方案

解決方案1 0 2022-09-15 19:48:24

解決方案2 0 2022-09-15 20:18:20

解決方案1
0 2022-09-15 19:48:24

解決方案2
0 2022-09-15 20:18:20