Auto-load page element when visiting www.site.com/#tab1 - jQuery

Hi,

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: www.site.com/#tab1 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

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

	

	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></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

        $$.toggleClass('active');

        // Clear any timeout's still waiting

        while (nTimeouts--) {

            clearTimeout(timeouts[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) {

        //e.preventDefault();

        $('.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 = $('a.active', '.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. http://www.example.com/my-page.html#tab2

    var query = getParameterByName('tab');

    if (query !== false) {

        document.getElementById(query)[0].click();

    }

});

</script>

	

	<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;

	}

	</style>

	

</head>

<body>



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

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

    

    <ul>

        <li>1</li>

        <li>2</li>

    </ul>

</div>



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

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

    

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li><a href="http://www.google.com/">4</a></li>

    </ul>

</div>

	

</body>

</html>

Many thanks for any help with this.