Using jQuery 'cookie' to maintain a selected tab on website

StackOverflow https://stackoverflow.com/questions/7866182

Frage

Can someone please explain how I use the jQuery Cookie plugin to persist the selected tab across my entire website?

Here's my current code in JSFiddle form: http://jsfiddle.net/mcgarriers/RXkyC/

If Tab2 is clicked and the link to Google is clicked, I'd still like that Tab to remain open when I return to that page.

Can someone explain to me how I achieve this?

I have attached my code here for reference:

<!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="tabs">

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

</div>

</body>
</html>

Many thanks for any pointers.

War es hilfreich?

Lösung

You first need to design a mechanism that will allow you to programatically select a tab. For example in jQuery UI tabs implementation, this is achieved with the select method. You also need a way of reading the currently selected tab. E.g.:

var selected = $tabs.tabs('option', 'selected');

Then on the page unload event store the value of the selected tab in the cookie. At the page load event, read the value from the cookie and select the appropriate tab.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top