專注於同一標簽

Question

我正在使用jquery UI創建選項卡。 要求是當我選擇tab2或任何其他標簽並重新加載/刷新頁面時，焦點應放在所選標簽上。 請找到小提琴http://jsfiddle.net/CnEUh/500/

我已經參加了許多在線論壇，但未能獲得預期的結果。 我在頁面load / reload上鏈接了Set Jquery ui active選項卡 ，但沒有得到結果。

嘗試以下代碼：

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

希望它能工作。 謝謝