Target specific tab with hyperlink from other page on same website - php

Question

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
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.
Example:
Tab 3 on documents.php contains "archived documents".
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.
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):
HTML:
<ul>
<li class="current">General Documents</li>
<li>Circulars</li>
<li>Newsletters</li>
<li>Archived Documents</li>
</ul>
Javascript:
<script>
$(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;
});
});</script>
Then there's some CSS in an external style sheet that formats the Tabs, their borders, background etc.
CSS Formatting:
.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;
}

Answer 1

Pass the # value url like http://example.com#tabs3 .Then use like this in your document ready.
$(document).ready(function(){
var hash = window.location.hash;
$('#'+ hash).addClass("current");
$(".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;
});
});