Navigation funktioniert einmal, aber dann tut nichts

Question

Ich versuche, eine Navigationsleiste mit vier Elementen zu codieren. Wenn das Element aktuell ausgewählt ist, wird es ein "rotes" Hintergrundbild haben, wenn es eines der anderen 3 ist, wird es ein "schwarzes" Hintergrundbild haben. meine vier Registerkarten sind ‚Zeitplan, Hausaufgaben, Benachrichtigungen und Sport‘ Ich habe versucht, zu machen 8 Funktionen wie die 2 unten

function setTimeRed() 
{ 
    document.getElementById("time").style.ClassName = 'timetable_r'; 
} 

function setTimeBlack() 
{ 
    document.getElementById("time").style.ClassName = 'time_r'; 
} 

Und dann vier Blöcke wie folgt aus:

function changeTimeButton() 
{ 
    var timePath = new String(); 
    timePath = document.getElementById("timetable").style.backgroundImage; 

    if(timePath == "url(assets/img/tabs/time_black.png)" || timePath == "") 
    { 
     setTimeRed(); 
     setHomeBlack(); 
     setNotiBlack(); 
     setSportBlack(); 
    } 
    else { 

    } 
} 

schließlich mein html dies hat :

<div id="tabbar"> 
      <ul id="tabs"> 

       <a href"#" onclick="changeTimeButton()"> 
        <li id="timetable" class="time_b"> 
         <p>Timetable</p> 
        </li> 
       </a> 

       <a href"#" onclick="changeHomeButton()"> 
        <li id="homework" class="home_b"> 
         <p>Homework</p> 
        </li> 
       </a> 

       <a href"#" onclick="changeNotiButton()"> 
        <li id="notifications" class="noti_b"> 
         <p>Notifications</p> 
        </li> 
       </a> 

       <a href"#" onclick="changeSportButton()"> 
        <li id="sport" class="sport_b"> 
         <p>Sport</p> 
        </li> 
       </a> 

      </ul> 

     </div> 

Es funktioniert einmal dann tut nichts. Warum?

Answer 1

Ich denke, Fehler in Ihrem Skript, nur ein Beispiel

document.getElementById("time").style.ClassName = 'timetable_r'; 

, die (da sind Sie hier gepostet keine Elemente mit der ID „Zeit“ in Ihrem HTML, zumindest im Code) sollten

document.getElementById("timetable").style.ClassName = 'timetable_r'; 

Eine andere Sache, wenn es einmal funktioniert, dann scheint es einige Probleme mit neuen Sitzung oder bestehende Sitzung zu speichern. Ich bin kein Experte für Javascript. Aber wenn es hilft, informieren Sie bitte.

Answer 2

Wenn die Hintergrundfarbe ausschalten, Sie alle vorhandenen Klassen wie diese entfernen müssen:

document.getElementById("timetable").className = 
document.getElementById("timetable").className.replace 
(/(?:^|\s)time_b(?!\S)/ , '') 

Da Sie Klassen statt Modifizierung der Stile in der Javascript verwenden, sollten Sie dabei bleiben. Sie scheinen zu versuchen, das Hintergrundbild im Javascript zu setzen. Stattdessen sollten Sie dieses Hintergrundbild auf die CSS-Stile der Klasse anwenden.

Die Verwendung eines Frameworks wie jQuery würde dies viel einfacher machen, da es Hilfsfunktionen wie addClass(), toggleClass() und removeClass() hat. Sie sollten auch die "a" -Tags innerhalb des 'li' setzen. Es macht meiner Meinung nach saubereren Code. Der Browser liest weiterhin den Klick und kann die Klassen korrekt anwenden.

Auch sollten Sie nicht so oft in Ihrem Code wiederholen müssen. Eine Lösung besteht darin, eine generische Funktion zu erstellen und die ID des Elements als Parameter zu übergeben. Dann verwenden Sie eine 'aktive' Klasse anstelle von 'Stundenplan_r'. Die aktive Klasse wird auf den aktiven Link angewendet und Sie müssen die Funktionen nicht so oft schreiben. Hoffe das hilft.