Auto-load page element when visiting - jQuery


I’ve been working on a tabbed navigation idea for a few weeks now and slowly (very slowly) getting there.

Is there a way using the following code that I can load one of the unordered lists automatically simply by calling it in the URL (e.g. #tab1).

So if I visit: when it visits the page it will automatically load the contents of that tab.

My code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">

<html xmlns="">


        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>Conforming XHTML 1.0 Strict Template</title>


	<script src=''></script>

<script type="text/javascript">

$(function() {

    var timeouts = [],

        nTimeouts = 0;

    // A helper function that allows multiple LI elements to be either

    // faded in or out or slide toggled up and down

    function fadeOutItems(ele, delay) {

        var $$ = $(ele), $n = $$.next();

        // Toggle the active class


        // Clear any timeout's still waiting

        while (nTimeouts--) {



        // Ensure the next element exists and has the correct nodeType

        // of an unordered list aka "UL"

        if ($n.length && $n[0].nodeName === 'UL') {

            nTimeouts = $('li', $n).length;

            $('li', $n).each(function(i) {

                // Determine whether to use a fade effect or a very quick

                // sliding effect

                // cache this

                var _this = $(this);

                timeouts[i] = setTimeout(function() {

                    delay ? _this.fadeToggle('slow') : _this.slideToggle('fast');

                }, 400*i);




    // Retrieves the URL parameters from the window object and allows

    // for custom query parameter requests by name

    function getParameterByName(name) {

        name = name.replace(/[\\[]/, '\\\\\\[').replace(/[\\]]/, '\\\\\\]');

        var regexS  = '[\\\\?&]' + name + '=([^&#]*)';

        var regex   = new RegExp(regexS);

        var results = regex.exec(window.location.href);

        if (results === null) {

            return false;

        } else {

            return decodeURIComponent(results[1].replace(/\\+/g, ' '));



    // This is the jQuery event that controls the click event for the

    // tabs on the page by using a class to cut down on code

    $('a', '.tabs').click(function(e) {


        $('.tabs ul li').hide();

        // Check on the other tabs, if the anchor link contains the

        // class "active" fade out the UL list items

        var $ca = $('', '.tabs');

        if ($ca.length) {

            // Check the currently selected tab against the one just clicked,

            // if they are the same end the code right here!

            if ($(this).parent().attr('id') === $ca.parent().attr('id')) {

                return false;


            fadeOutItems($ca, false);


        fadeOutItems(this, true);


    // Check the URL query string, if a tab hash is present we can

    // force the click event on the selected tab


    // Eg.

    var query = getParameterByName('tab');

    if (query !== false) {






	<style type="text/css">

	body {

    font-family: Arial;

    font-size: 13px;

    line-height: 16px;


	.tabs a {

		background-color: #dedede;

		color: #565656;

		display: block;

		margin-bottom: 5px;

		padding: 5px 8px;

		text-decoration: none;


	.tabs ul {

		margin: 0 0 10px;

		padding: 0;


	.tabs li {

		background-color: #eee;

		border: 1px solid #ccc;

		color: #1a1a1a;

		display: none;

		border-radius: 5px;

		margin-bottom: 1px;

		padding: 5px 10px;






	<div id="tab1" class="tabs">

    <a href="#" id="tab1link">Tab 1</a>







<div id="tab2" class="tabs">

    <a href="#" id="tab2link">Tab 2</a>






        <li><a href="">4</a></li>






Many thanks for any help with this.