title: Navigation Works Once, But Then Does Nothing
body: <p>I'm trying to code a navigation bar with four elements. If the element is currently selected it will have a "red" background image, if it is one of the other 3, it will have a "black" background image. my four tabs are 'timetable, homework, notifications and sport' 
  I tried making 8 functions like the 2 below</p>
  
  <pre><code>function setTimeRed() 
  {
      document.getElementById("time").style.ClassName = 'timetable_r';
  }
  
  function setTimeBlack() 
  {
      document.getElementById("time").style.ClassName = 'time_r';
  }
  </code></pre>
  
  <p>And then four blocks like this:</p>
  
  <pre><code>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 {
  
      }  
  }
  </code></pre>
  
  <p>finally, my html has this:</p>
  
  <pre><code>&lt;div id="tabbar"&gt;
              &lt;ul id="tabs"&gt;
  
                  &lt;a href"#" onclick="changeTimeButton()"&gt;
                      &lt;li id="timetable" class="time_b"&gt;
                          &lt;p&gt;Timetable&lt;/p&gt;
                      &lt;/li&gt;
                  &lt;/a&gt;
  
                  &lt;a href"#" onclick="changeHomeButton()"&gt;
                      &lt;li id="homework" class="home_b"&gt;
                          &lt;p&gt;Homework&lt;/p&gt;
                      &lt;/li&gt;
                  &lt;/a&gt;
  
                  &lt;a href"#" onclick="changeNotiButton()"&gt;
                      &lt;li id="notifications" class="noti_b"&gt;
                          &lt;p&gt;Notifications&lt;/p&gt;
                      &lt;/li&gt;
                  &lt;/a&gt;
  
                  &lt;a href"#" onclick="changeSportButton()"&gt;
                      &lt;li id="sport"  class="sport_b"&gt;
                          &lt;p&gt;Sport&lt;/p&gt;
                      &lt;/li&gt;
                  &lt;/a&gt;
  
              &lt;/ul&gt;
  
          &lt;/div&gt;
  </code></pre>
  
  <p>It works once then does nothing. Why?</p>