Untitled


<html>

<head>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>


<script type="text/javascript">

$(function() {


    // 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');


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

        // of an unordered list aka "UL"

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

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

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

                // sliding effect

                delay ? $(this).delay(i * 400).fadeToggle('slow') : $(this).slideToggle('fast');

            });

        }

    }


    // 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();


        // 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="#">Tab 1</a>


            <ul>

                <li>1</li>

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

                <li>3</li>

            </ul>

        </div>


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

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


            <ul>

                <li>4</li>

                <li>5</li>

                <li>6</li>

            </ul>

        </div>


    </body>


</html>