javascript - 使用 anchor 标记切换 block 和不显示

Question

在我的电子应用程序中，我想在不同的屏幕之间切换，因此我需要使用 block 显示和无显示。 我有一个包含 anchor 标签的侧面导航栏，每当我单击其中一个标签时，我希望我的屏幕阻止所有其他屏幕并显示被单击的屏幕。

下面是必需的代码

侧导航栏 -未为其附加 CSS

<div class="sidebar">
  <a href="#home" class="nava" id="homebtn" onclick="showhome()">Home</a>
  <a href="#tasks" class="nava" id="taskbtn" onclick="showtasks()">Tasks</a>
  <a href="#contact" class="nava">TimeTable</a>
  <a href="#about" class="nava">Quick notes</a>
  <a href="#about" class="nava">Expenses</a>
</div>

不同的显示

<div id="home" class="screen" style="display: none">
  <h1 class="centertitle">Home</h1>
</div>


<div id="tasks" class="screen" style="display: none">
  <h1 class="centertitle">Tasks</h1>
</div>

脚本

<script>
  function showtasks() {
    let task = document.getElementById("tasks");
    let taskbtn = document.getElementById("taskbtn");
    let allnav = document.getElementsByClassName("nava");
    let allscreens = document.getElementsByClassName("screen");
    allscreens.style.display = "none";
    task.style.display = "block";
    allnav.className = "";
    taskbtn.className = "active";
  }

  function showhome() {
    let home = document.getElementById("home");
    let homebtn = document.getElementById("homebtn");
    let allnav = document.getElementsByClassName("nava");
    let allscreens = document.getElementsByClassName("screen");
    allscreens.style.display = "none";
    home.style.display = "block";
    allnav.className = "";
    homebtn.className = "active";
  }
</script>

Answer 1

这里的问题是 allscreens 变量。

getElementsByClassName返回具有给定类名的元素数组。因此，为了将它们全部设置为 display: none，您需要循环遍历这些元素。

let allscreens = document.getElementsByClassName("screen");
for (var i = 0; i < allscreens.length; i++) {
  allscreens[i].style.display = "none";
}

---

function showtasks() {
  let task = document.getElementById("tasks");
  let taskbtn = document.getElementById("taskbtn");
  let allnav = document.getElementsByClassName("nava");
  let allscreens = document.getElementsByClassName("screen");
  for (var i = 0; i < allscreens.length; i++ ) {
    allscreens[i].style.display = "none";
  }
  task.style.display = "block";
  allnav.className = "";
  taskbtn.className = "active";
}

function showhome() {
  let home = document.getElementById("home");
  let homebtn = document.getElementById("homebtn");
  let allnav = document.getElementsByClassName("nava");
  let allscreens = document.getElementsByClassName("screen");
  for (var i = 0; i < allscreens.length; i++ ) {
    allscreens[i].style.display = "none";
  }
  home.style.display = "block";
  allnav.className = "";
  homebtn.className = "active";
}

<div class="sidebar">
  <a href="#home" class="nava" id="homebtn" onclick="showhome()">Home</a>
  <a href="#tasks" class="nava" id="taskbtn" onclick="showtasks()">Tasks</a>
  <a href="#contact" class="nava">TimeTable</a>
  <a href="#about" class="nava">Quick notes</a>
  <a href="#about" class="nava">Expenses</a>
</div>

<div id="home" class="screen" style="display: none">
  <h1 class="centertitle">Home</h1>
</div>


<div id="tasks" class="screen" style="display: none">
  <h1 class="centertitle">Tasks</h1>
</div>