Warum setzt meine JavaScript-Datei das Attribut eines divs nicht zurück?

Question

Ich habe ein Skript, das eine Klasse zu einem Paar divs hinzufügt und entfernt, wenn auf einen Link geklickt wird. Jedes div hat eine set-Klasse, die nicht entfernt werden muss. Diese Klasse wird jedoch entfernt. Wie verhindere ich das?

HTML

<div id="home" class="page pageShowing"></div> 
<div id="portfolio" class="page"></div> 

JS

let holder = document.getElementById("main"); 
let pageShowingClass = holder.getElementsByClassName("pageShowing"); 

let pages = holder.getElementsByClassName("page"); 

Navigation.Links.forEach(function(value){ 
    let createNavLink = document.createElement("li"); 
    let createNavText = document.createTextNode(value.title); 
    createNavLink.appendChild(createNavText); 
    createNavList.appendChild(createNavLink); 

    createNavLink.addEventListener("click", function(){ 
     let link = createNavLink.innerHTML; 
     link = link.toLowerCase().replace(" ", "_"); 
     let page = document.getElementById(link); 
     page.setAttribute("class", "page"); 
     for(let i = 0; i < pageShowingClass.length; i++){ 

Hier sollte der Click-Handler nur die pageShowing Klasse werden entfernt wenn es vorhanden ist, sondern auch ist das Entfernen der Seitenklasse

  if(pageShowingClass[i].getAttribute("class") == "pageShowing"){ 
       pageShowingClass[i].removeAttribute("class"); 
      } 
     } 

Hier sollte der Click-Handler readding Seite Klasse, wenn der Link angeklickt wird.

 page.setAttribute("class", "page"); 
     page.setAttribute("class", "pageShowing"); 
     page.style.display = "block"; 
    }); 
}); 

Ich weiß, dass es einfacher ist, dies in jQuery zu tun, aber ich will nicht, es in jQuery sein. Ich habe es auch schon, wo es die pageShowing Klasse dynamisch hinzufügen und entfernen wird, also ist das kein Problem.

Answer 1

Element.setAttribute() fügt ein neues Attribut hinzu oder ändert den Wert eines vorhandenen Attributs für das angegebene Element.

Verwenden Sie Element.classList.add(String [, String]), fügt angegebene Klassenwerte hinzu. Wenn diese Klassen bereits im Attribut des Elements vorhanden sind, werden sie ignoriert.

page.classList.add('page', 'pageShowing') 

Answer 2

Wie Siguza sagte in der Antwort, sind Sie das Klassenattribut zu entfernen, das ist, was Sie nicht in diesem Fall werden wollen zu tun.

Sagen wir das Element in Frage hier als Referenz:

<div id="home" class="page pageShowing"></div> 

class ist ein Attribut des Elements div. Wenn Sie removeAttribute('class') nennen, wird es tun, wie es sagt:

<div id="home"></div> 

Wenn Sie das Element in den Chrome-Entwickler-Tools überprüfen oder was auch immer Sie verwenden, werden Sie das Element zu sehen, wie es oben sagt.

Sie suchen wahrscheinlich für Element.className Ihre Klassen zu modifizieren, so dass anstelle von

if(pageShowingClass[i].getAttribute("class") == "pageShowing"){ 
    pageShowingClass[i].removeAttribute("class"); 
} 

Sie

if(pageShowingClass[i].getAttribute("class") == "pageShowing"){ 
    pageShowingClass[i].className = "page"; 
} 

wollen und wenn Sie wollen wieder die pageShowing Klasse hinzuzufügen, Sie‘ sag einfach pageShowingClass[i].className = "page pageShowing"