使用锚标记切换块和不显示

Question

In my electron app I want to toggle between different screens, thus I need to use block and none displays. I have a side navbar which contain the anchor tags, whenever I click one of those I want my screen to block all the other screens and display the one which was clicked.

Required Code Below

Side NavBar - not attaching the css for it

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

Different Displays

<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

<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

The problem here is the allscreens variable.

getElementsByClassName returns an array of elements with the given class name. So in order to set them all to display: none , you will need to loop through the elements.

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>