title: Javascript classList is not working as expected
body: <p>I am trying to create a simple tabbed feature using js and css.
  When a tab button is clicked, it should remove all <code>active</code> classes from the control and then add the <code>active</code> class to only the selected elements.</p>
  
  <p>However, when I try to remove the <code>active</code> class, it does not work as expected.</p>
  
  <p>Switching between tabs should only allow one button and one content to be active at any time.</p>
  
  <p>See this <a href="http://jsfiddle.net/hdgn1hLg/" rel="nofollow">jsFiddle</a></p>
  
  <pre><code>var tabs = document.getElementsByClassName('tabs');
  
  Array.prototype.forEach.call(tabs, function(tab) {
  
      var btns = tab.getElementsByClassName('tabs-button');
      Array.prototype.forEach.call(btns, function(btn) {
  
          btn.addEventListener('click', function(e){
  
              e.preventDefault();
              var href = this.getAttribute('href').replace('#','');
              var target = document.getElementById(href);
              var allActive = tab.getElementsByClassName('active');
              Array.prototype.forEach.call(allActive, function(active) {
                  active.classList.remove('active');
              });
              this.classList.add('active');
              target.classList.add('active');
  
          });
  
      });
  
  });
  </code></pre>
  
  <p>Can anyone see where I am going wrong?</p>