将焦点放在同一个选项卡上

Question

我正在使用jquery UI来创建选项卡。要求是当我选择 tab2 或任何其他选项卡并重新加载/刷新页面时，焦点应位于所选选项卡上。请找到小提琴 http://jsfiddle.net/CnEUh/500/

我浏览了许多在线论坛，但无法获得预期的结果。我点击了链接 在页面加载/重新加载时设置 Jquery ui 活动选项卡，但没有得到结果。

尝试了以下代码：

$(document).ready(function() {
      $("#tabs").tabs({active: tabs-2});
      // Set active tab on page load
      var  SelectedTab = tabs-2;
     if(tabSelectedId!=""){
       $("#tabs").tabs({selected: tabSelectedId});
      }  
  });

请建议如何在页面重新加载时将焦点保持在所选选项卡上。我的小提琴 http://jsfiddle.net/CnEUh/500/

Answer 1

您可以使用 location.href 来完成它

单击时，只需添加 #tab=2，然后在页面加载时，您可以在此处检索 location.href 并选择选择的 tav。

Answer 2

添加 jquery.cookie.js 库和以下代码

$(document).ready(function() {
var $tabs = $( "#tabs" ).tabs({
            activate: function(event ,ui){
                $.cookie('active_tab', ui.newTab.index(), { path: '/' });
            }
        });
        var selectedIndex=parseInt($.cookie('active_tab'));
        if(selectedIndex) {
            $tabs.tabs({ active: selectedIndex });
            $('#tabs').find("ul:first li:nth-child(" + (selectedIndex + 1) + ")").find('a').trigger('click');
        }
        // set cookie on tab select
});

或者没有 jquery.cookie.js，将活动选项卡索引作为参数传递

var activeTab;
var $tabs = $("#tabs").tabs({
    activate: function (event, ui) {
        activeTab = ui.newTab.index();
    }
});
var params = {};
if (location.search) {
    var parts = location.search.substring(1).split('&');
    for (var i = 0; i < parts.length; i++) {
        var nv = parts[i].split('=');
        if (!nv[0]) continue;
        params[nv[0]] = nv[1] || true;
    }
}
// Now you can get the parameters you want like so:
var selectedIndex = parseInt(params.selectedIndex);
if (selectedIndex) {
    $tabs.tabs({
        active: selectedIndex
    });
    $('#tabs').find("ul:first li:nth-child(" + (selectedIndex + 1) + ")").find('a').trigger('click');
}
$('#tabs').click(function() {
    window.location.href = window.location.href.replace( /[?#].*|$/, "?selectedIndex="+activeTab );
});

希望它有效。谢谢