如何使用jQuery为菜单设置Cookie？相关交互代码求助

看起来你已经搞定了菜单的悬停切换逻辑，现在就差把用户的选择用Cookie存下来，刷新页面也能记住对吧？我给你整理了完整的实现方案：

完整代码实现 #

首先确认你已经引入了jQuery和jQuery Cookie插件（你的代码里已经用到$.cookie，默认你已经配置好了）：

// 页面加载时恢复之前保存的选择状态
$(document).ready(function() {
    // 读取Cookie，默认选中客户类型按钮
    const savedTab = $.cookie("tab") || 'select-user-type_customer';
    
    // 更新按钮的激活状态
    $('.select-user-type-js.active').removeClass('active');
    $('.select-user-type-js.' + savedTab).addClass('active');
    
    // 根据保存的状态切换列表显示
    if (savedTab === 'select-user-type_customer') {
        $('#buyer').show();
        $('#seller').hide();
    } else {
        $('#buyer').hide();
        $('#seller').show();
    }
});

// 保留你原有的鼠标悬停切换逻辑
$(document).on('mouseenter', '.select-user-type-js', function() {
    $('.select-user-type-js.active').add($(this)).toggleClass('active');
    if ($(this).hasClass('select-user-type_customer')) {
        $('#buyer').show();
        $('#seller').hide();
    } else {
        $('#buyer').hide();
        $('#seller').show();
    }
});

// 点击按钮时保存选择到Cookie
$(document).on("click", ".select-user-type-js", function() {
    // 确定当前选中的用户类型类名
    const selectedType = $(this).hasClass('select-user-type_customer') 
        ? 'select-user-type_customer' 
        : 'select-user-type_seller'; // 这里替换成你实际的卖家按钮类名
    
    // 设置Cookie，有效期7天，全站有效
    $.cookie("tab", selectedType, { expires: 7, path: '/' });
    
    // 点击后固定激活状态（避免鼠标离开后状态变动）
    $('.select-user-type-js.active').removeClass('active');
    $(this).addClass('active');
});

关键细节说明 #

• 页面初始化恢复：在页面加载完成时读取Cookie，自动把对应的按钮设为激活状态，并切换到对应的列表，确保用户刷新页面后能看到之前的选择。
• Cookie配置：expires:7设置Cookie7天后过期，path:'/'保证Cookie在整个网站的所有页面都能读取到，不会局限在当前页面。
• 类名适配：我假设卖家按钮的类是select-user-type_seller，如果你的实际类名不一样，记得把这个值替换成你项目里的真实类名。
• 点击事件优化：点击按钮时不仅存Cookie，还主动更新激活类，避免鼠标离开时被悬停事件改变状态，让用户的点击选择更稳固。

可选替代方案 #

如果你不想用jQuery Cookie插件，也可以用HTML5的localStorage来存储，代码更简洁，不需要额外插件：

// 保存时
localStorage.setItem('tab', selectedType);
// 读取时
const savedTab = localStorage.getItem('tab') || 'select-user-type_customer';

这种方式适合不需要服务器读取状态的场景，比Cookie更轻量。

内容的提问来源于stack exchange，提问作者Jadasdas