Question

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

我经历了很多在线论坛，但无法获得预期的结果。我按照Set Jquery ui active tab on page load/reload链接，但没有得到结果。

尝试以下代码：

$(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 );
});

希望它有效。感谢

专注于同一个标签

2 个答案: