title: jQuery tabs - make current tab highlighted from separate navigation
body: <p>First question here as a user, so please take it easy on this noob!</p>
  
  <p>Anyway, had a quick question concerning jQuery tabs. Not the UI version, rather, a different version. What I'm trying to do is be able to activate a link from a separate navigation area, but get the selected tab to appear as "current" Here's the script I'm using:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function(){
  $('#tabs div').hide();
  $('#tabs div:first').show();
  $('#tabs ul li:first').addClass('active');
  
  $('#tabs ul li a').click(function(){
      $('#tabs ul li').removeClass('active');
      $(this).parent().addClass('active');
      var currentTab = $(this).attr('href');
      $('#tabs div').hide();
      $(currentTab).show();
      return false;
  });
  $('#sitenav ul li a').click(function(){
          $('#tabs ul li').removeClass('active');
          $(this).parent('#tabs ul li a').addClass('active');
          var currentTab = $(this).attr('href');
          $('#tabs div').hide();
          $(currentTab).show();
          return false;
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>And here is the secondary navigation accessing this:</p>
  
  <pre><code>&lt;div id="sitenav"&gt;
      &lt;ul&gt;
      &lt;li class="home"&gt;&lt;a href="/search/"&gt;Search ISU...&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tab1" title="Faculty/Staff"&gt;Faculty/Staff&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tab2" title="Student"&gt;Student&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tab3" title="Department"&gt;Department&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tab4" title="Website"&gt;Website&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;   
  &lt;/div&gt;
  </code></pre>
  
  <p>Just for aesthetic reasons, here is the original navigation for the actual tabbed areas:</p>
  
  <pre><code>&lt;div id="tabs"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#tab1"&gt;Faculty/Staff&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#tab2"&gt;Student&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#tab3"&gt;Departments&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#tab4"&gt;ISU Website&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>(the ending tag for the "tabs" div is at the bottom of the document encircling all the content areas, which work fine...just an fyi!  :) )</p>
  
  <p>What I was able to do was get the "sitenav" to actually link to the other areas, but for the life of me, I cannot get the tab to highlight and become "current". Surely it's something small that I just keep overlooking, but perhaps fresh eyes might see it! Thank you all!</p>
  
  <p>edit: jeez...almost forgot. here is the test version of this thing in action, sort of: <a href="http://www.indstate.edu/search/index1.htm" rel="nofollow">www.indstate.edu/search/index1.htm</a></p>