How can I link directly to a specific JavaScript tab?

Question

My website has a tabbed interface that is used consistently throughout all of the pages. I can link to the base page (the first tab), but can't figure out how to link to a specific tab.

This is my JavaScript:

$(document).ready(function() {
  $(".tabs a").click(function() {
    var $this = $(this);
    $(".panel").hide();
    $(".tabs a.active").removeClass("active");
    $this.addClass("active").blur();
    var panel = $this.attr("href");
    $(panel).fadeIn(250);
    return false;
  });
$(".tabs li:first-of-type a").click();
});

And each of my pages is set up like this:

<div id="aboutContainer">
    <ul class="tabs">
        <li><a href="#panel1">About Us</a></li>
        <li><a href="#panel2">Contact Us</a></li>
        <li><a href="#panel3">Mailing List</a></li>
        <li><a href="#panel4">Terms</a></li>
        <li><a href="#panel5">Privacy Policy</a></li>
        <li><a href="#panel6">Help</a></li>
    </ul>
        <div class="panelContainer">
            <div class="panel" id="panel1">
                <?php include('includes/aboutme.php'); ?>
            </div>

            <div class="panel" id="panel2">
                <?php include('includes/contact.php'); ?>
            </div>

            <div class="panel" id="panel3">
                <?php include('includes/mailinglist.php'); ?>
            </div>

            <div class="panel" id="panel4">
                <?php include('includes/terms.php'); ?>             
            </div>

            <div class="panel" id="panel5">
                <?php include('includes/privacypolicy.php'); ?>
            </div>

            <div class="panel" id="panel6">
                <?php include('includes/cheekyreference.php'); ?>
            </div>
        </div>
</div>

Any pointers would be greatly appreciated. I'm pretty new to JavaScript and haven't been able to find an answer searching the web.

To clarify things a little:

If I'm on the about.php page, the tabbed interface works. But the kind of link I'm trying to make is as follows: If I were on another page, I'd like to link to a particular tab on the about page. I have a navigation footer and I'd like to be able to click on a hyperlink such as 'mailing list' or 'contact' and have the correct page show up as well as the correct tab.

Answer 1

If you want to specifically click the Terms tab for example, you'd do:

$(".tabs a[href='#panel14']").click();