使用jQuery 'cookie'在网站上保持选定的选项卡

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

本文关键字：选项 网站 cookie jQuery 使用      更新时间：2023-09-26

有人能解释一下我是如何使用jQuery Cookie插件在我的整个网站中持久化所选选项卡的吗?

下面是我当前JSFiddle形式的代码:http://jsfiddle.net/mcgarriers/RXkyC/

如果Tab2被点击，链接到谷歌被点击，我仍然希望该选项卡保持打开，当我返回到那个页面。

谁能给我解释一下我是怎么做到的?

我把我的代码附在这里供参考:

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

首先需要设计一种机制，允许您以编程方式选择选项卡。例如，在jQuery UI选项卡实现中，这是通过select方法实现的。您还需要一种读取当前选定选项卡的方法。例如:

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

然后在页面卸载事件中将所选选项卡的值存储在cookie中。在页面加载事件中，从cookie中读取值并选择适当的选项卡。

相关文章：