title: Target specific tab with hyperlink from other page on same website
body: <p>I've got a page (documents.php) that contains four tabs, the 1st tab is set as the default and opens when one browses to documents.php</p>
  
  <p>I need to be able to target tabs 2, 3 and 4 directly from hyperlinks on my index.php and a JavaScript menu that appears on all pages on the site.</p>
  
  <p>Example: </p>
  
  <p>Tab 3 on documents.php contains "archived documents".</p>
  
  <p>On Index.php I want to place a link called "Click here to go to Archived documents" and when someone clicks on it it must take them to documents.php but automatically go to Tab 3 which is "archived documents" and not go to the default 1st Tab.</p>
  
  <p>Here is the coding I am using to create the Tabs and would like to only modify this at most (and not re-invent the wheel by using jQuery or other technology and re-write the tabs on this and other pages):</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="current"&gt;&lt;a href="#tab1"&gt;General Documents&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tab2"&gt;Circulars&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tab3"&gt;Newsletters&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tab4"&gt;Archived Documents&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function(){
   $(".tabs li").click(function() {
    $(this).parent().parent().find(".tab-content").hide();
    var selected_tab = $(this).find("a").attr("href");
    $(selected_tab).fadeIn();
    $(this).parent().find("li").removeClass('current');
    $(this).addClass("current");
     return false;
      });
  });&lt;/script&gt;
  </code></pre>
  
  <p>Then there's some CSS in an external style sheet that formats the Tabs, their borders, background etc.</p>
  
  <p><strong>CSS Formatting:</strong></p>
  
  <pre><code>.tabs ul{
      list-style:none;
      display:block;
      margin:0px;
      padding:0px;
      z-index:99;
      position:relative;
  }
  .tabs li {
      float:left;
      display:block;
      border-top:#E5E5E5 1px solid;
      border-left:#E5E5E5 1px solid;
      border-right:#E5E5E5 1px solid;
      border-top-left-radius:4px;
      border-top-right-radius:4px;
      position:relative;
      z-index:999;    
      color: #444444;
      padding: 4px 8px 4px 8px;
      margin: 0px 6px 0px 0px;
      background: #e7e7e7 url(/assets/images/common/bg.png) repeat-x;
  }
  
  .tabs li:hover {
  
  /*If you want hover effects on tabs put your css here*/
  
  }
  .tabs li a {
      display:block;
      color:#323234;
      outline:none;
  }
  
  .tabs li.current {
      border-bottom:#DD6E27 2px solid;
      outline:none;
  }
  
  .tab-content {
      display:none;
      clear:both;
      min-height: 120px;
      border-top-left-radius:0px;
      border-top-right-radius:4px;
      border-bottom-left-radius:4px;
      border-bottom-right-radius:4px;
      color:#444444;
        background:#fefefe url(/assets/images/common/bg.png) repeat-x;
      border: 1px solid #E5E5E5;
      overflow:hidden;
      padding:15px;
  }
  
  .tab-content:first-child {
      display: block;
  }
  </code></pre>