title: Javascript tab navigation issue
body: <p>I was wondering if anybody could help me with a fix for an error in the following script.</p>
  
  <p>Everything works fine until I add a second line with the same links, then the behavior is not as expected.</p>
  
  <p>This is a simple script to hide and show tabs.</p>
  
  <p>At some point, when clicking on both top and bottom row of links, 2 tabs are displayed at the same time.</p>
  
  <p>There's a live example on: <a href="http://jsfiddle.net/8cwqH/1/" rel="nofollow">http://jsfiddle.net/8cwqH/1/</a></p>
  
  <pre><code>&lt;ul class="tabs"&gt;
  &lt;li&gt;&lt;a href="#tab1"&gt;Tab1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#tab2"&gt;Tab2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#tab3"&gt;Tab3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div id="tab1"&gt;
   tab1&lt;br /&gt;tab1&lt;br /&gt;
   tab1&lt;br /&gt;tab1&lt;br /&gt;
  &lt;/div&gt;
  
  &lt;div id="tab2"&gt;
   tab2&lt;br /&gt;tab2&lt;br /&gt;
   tab2&lt;br /&gt;tab2&lt;br /&gt;
  &lt;/div&gt;
  
  &lt;div id="tab3"&gt;
   tab3&lt;br /&gt;tab3&lt;br /&gt;
   tab3&lt;br /&gt;tab3&lt;br /&gt;
  &lt;/div&gt;
  
  &lt;br /&gt;
  
  &lt;div class="othertabs"&gt;
   &lt;a href="#tab1"&gt;Tab1&lt;/a&gt;
   &lt;a href="#tab2"&gt;Tab2&lt;/a&gt;
   &lt;a href="#tab3"&gt;Tab3&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;a href="#tab2"&gt;tab 2 link&lt;/a&gt;
  </code></pre>
  
  <p>This is the script:</p>
  
  <pre><code>// Wait until the DOM has loaded before querying the document
  $(document).ready(function(){
      $('ul.tabs, div.othertabs').each(function(){
          // For each set of tabs, we want to keep track of
          // which tab is active and it's associated content
          var $active, $content, $links = $(this).find('a');
  
          // If the location.hash matches one of the links, use that as the active tab.
          // If no match is found, use the first link as the initial active tab.
          $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
          $active.addClass('active');
          $content = $($active.attr('href'));
  
          // Hide the remaining content
          $links.not($active).each(function () {
              $($(this).attr('href')).hide();
          });
  
          // Bind the click event handler
          $(this).on('click', 'a', function(e){
              // Make the old tab inactive.
              $active.removeClass('active');
              $content.hide();
  
              // Update the variables with the new link and content
              $active = $(this);
              $content = $($(this).attr('href'));
  
              // Make the tab active.
              $active.addClass('active');
              $content.fadeIn();
  
              // Prevent the anchor's default click action
              e.preventDefault();
          });
      });
  });
  </code></pre>