Question

我有一个包含这些菜单的网站

<li><a href="#">Man</a>
    <ul class="sub_menu">
        <li><a href="mcaps">Caps</a></li>
        <li><a href="#">Shirts</a></li>
        <li><a href="#">Tshirts</a></li>
        <li><a href="#">Jackets</a></li>
        <li><a href="#">Jeans</a></li>
        <li><a href="#">Shorts</a></li>
        <li><a href="#">Footwear</a></li>
    </ul>
</li>

<li><a href="#">Woman</a>
    <ul class="sub_menu">
        <li><a href="#">Caps</a></li>
        <li><a href="#">Sunglasses</a></li>
        <li><a href="#">Shirts</a></li>
        <li><a href="#">Tshirts</a></li>
        <li><a href="#">Dresses</a></li>
        <li><a href="#">Jackets</a></li>
        <li><a href="#">Jeans</a></li>
        <li><a href="#">Purse</a></li>
        <li><a href="#">Handbags</a></li>
        <li><a href="#">Footwear</a></li>
    </ul>
</li>

现在使用我的jQuery代码，我将获取图片并说明用户是否点击了man＆gt; mcaps

$(document).ready(function() {
    $('ul.sub_menu a').click(function(e) {
        e.preventDefault();
        var txt = $(this).attr('href');
        $.ajax({
            type: "POST",
            url: "thegamer.php",
            data:{ send_txt: txt },
            success: function(data){
                $('#container').fadeOut('8000', function (){
                    $('#container').html(data);
                    $('#container').fadeIn('8000');
                });
            }   
        });
    });
});

现在，当我刷新页面时，它会全力以赴显示索引页面，我知道我必须使用cookie，但是如何使用它们来维护页面呢？

当用户点击Woman＆gt; jeans现在必须设置cookie，而不是在页面刷新时消失。

任何详细的代码都会有用。

Answer 1

您需要包含一个可用的jQuery cookie插件
将有一种方法（主要称为$ .cookie），您可以根据给定的密钥（您的选择）设置，读取和删除Cookie

像这样的东西

$.cookie("mykey", "10");   //set value of cookie to 10
var mycookie = $.cookie("mykey");   // get cookie value or NULL if not set
$.cookie("mykey", null);   // unset = delete cookie

您可以根据需要探索更多设置（如过期时间等）

Answer 2

首先，您需要下载this plugin并将其添加到您的网页。

然后像这样修改你的代码：

$(document).ready(function() {
    // set the content on page load to match the last clicked link
    setContainerHtml($.cookie("activeElementHref"));

   // set the content on link click
    $('ul.sub_menu a').click(function(e) {
        e.preventDefault();
        var txt = $(this).attr('href');
        $.cookie("activeElementHref", txt) 
        setContainerHtml(txt);
    });
}); 

function setContainerHtml(href) {
    $.ajax({
        type: "POST",
        url: "thegamer.php",
        data:{ send_txt: href },
        success: function(data){
            $('#container').fadeOut('8000', function (){
                $('#container').html(data);
                $('#container').fadeIn('8000');
            });
        }   
    });
}

如何使用Cookie来维护页面状态？

2 个答案: