0

我正在使用 jQuery 选项卡处理页面。该示例显示了如何在选择选项卡时设置 cookie。但是，我想做的是使用一个按钮来要求用户有意识地决定选择一个特定的选项卡作为他/她的默认选项卡。

我在每个选项卡的内容中添加了一个按钮，其值等于选项卡锚值。目前单击仅显示警告消息。

有人可以帮我将按钮单击与将 cookie 设置为选项卡值相关联。我已经建立了一个 jsfiddle 来展示我想要完成的事情。任何帮助将不胜感激！！

http://jsfiddle.net/lbriquet/eLx2d/15/

    $(function() {
    $( "#tabs" ).tabs({
        select: function(event, ui) {                   
           window.location.replace(ui.tab.hash);
        },
        cookie: {
            // store cookie for a day, without, it would be a session cookie
            expires: 1
        }                        
    });
    $(".my_button").click(function() {
        alert($(this).attr("value"));
    });  
});
4

1 回答 1

0

您可以$.cookie直接使用来提供您的自定义行为。简而言之，在创建选项卡控件时（在创建事件中）检查是否有 cookie 值。如果是这样，则根据该值设置选定的选项卡。并在单击按钮时存储它：

$(function() {
    $( "#tabs" ).tabs({
        select: function(event, ui) {                   
           window.location.replace(ui.tab.hash);
        },
        create: function(e, ui) {
            var tabs = $(e.target);
            // Get the value from the cookie
            var value = $.cookie('selected-tab');

            if(value) {
                console.log('Setting value %s', value);
                // Set which tab should be selected. Older jQuery UI API
                tabs.tabs('select',value);                
            }
        },                   
    });
    $(".my_button").click(function() {
       var value = $(this).attr("value");
       console.log('Storing tab %s', value);
       // Store value with key "selected-tab" and set it to expire
       // in one day. 
       $.cookie('selected-tab', value, {expires: 1});
    });  
});

在较新版本的 jQuery UI（在 1.9+ 上验证）中，您需要使用带有选项卡索引的活动选项来选择选项卡。

例子：

  //store as value in above example or dynamically find index based on the id
  var selectedIndex = 1;

  $('#tabs').tabs('option', 'active', selectedIndex);

  // Or even better pass the active index when creating the tabs control
  $('#tabs').tabs({ active: selectedIndex });
于 2013-04-29T13:53:05.243 回答