jQuery UI選項卡，單擊其他選項卡時更新URL

Question

我正在使用jQuery UI的選項卡： http ： //jqueryui.com/demos/tabs/

當用戶通過添加錨鏈接點擊其他選項卡時，如何更新瀏覽器的當前URL： ex：url.html＃tab-4並同時推送瀏覽器的當前歷史記錄。

謝謝！

Answer 1

對於jQuery UI 1.10和更高版本的show已被棄用，有利於activate 。 id也不再是有效的jQuery。 請改用.attr('id') 。 最后，使用on('tabsactivate')而不是bind() 。

$(function() {
    $("#tabs").tabs({
        activate: function(event, ui) {
            window.location.hash = ui.newPanel.attr('id');
        }
    });
});

創作后方法：

$("#myTabs").on( "tabsactivate", function(event, ui) {
    window.location.hash = ui.panel.id;
});

演示： http ： //jsfiddle.net/RVHzV/

可觀察到的結果： http ： //jsfiddle.net/RVHzV/show/light/

早期版本的JQuery

在Tab鍵調用中添加處理程序，以使用選項卡ID更新位置哈希值：

$("#myTabs").tabs({
   // options ...
   show: function(event, ui) {
        window.location.hash = ui.panel.id;
   }
});

您還可以在創建UI標簽后添加此項：

$("#myTabs").bind( "tabsshow", function(event, ui) {
        window.location.hash = ui.panel.id;
});

代碼演示： http ： //jsfiddle.net/jtbowden/ZsUBz/1/

可觀察到的結果： http ： //fiddle.jshell.net/jtbowden/ZsUBz/1/show/light/

Answer 2

這應該得到你想要的（使用jQuery UI 1.8 ，在1.9及更高版本中使用activate事件 ，請參閱代碼示例的其他答案）。 我在jQuery UI演示中使用了示例HTML;

        $( "#tabs" ).tabs({
            select: function(event, ui) {                   
                window.location.hash = ui.tab.hash;
            }
        });

Answer 3

首先，我們需要更新選項卡更改的哈希值（這是最新的jQueryUI）：

$('#tabs').tabs({
    beforeActivate: function (event, ui) {
        window.location.hash = ui.newPanel.selector;
    }
});    

然后我們需要更新哈希更改的活動選項卡（即啟用瀏覽器歷史記錄，后退/前進按鈕和用戶手動鍵入哈希）：

$(window).on('hashchange', function () {
  if (!location.hash) {
    $('#tabs').tabs('option', 'active', 0);
    return;
  }
  $('#tabs > ul > li > a').each(function (index, a) {
    if ($(a).attr('href') == location.hash) {
      $('#tabs').tabs('option', 'active', index);
    }
  });
});

Answer 4

$( "#tabs" ).tabs({            
        activate: function(event, ui) {
            //Key => random string
            //url => URL you want to set
            window.history.pushState({key:'url'},'','url');
        }
    });

Answer 5

我不得不使用“創建”而不是“激活”來獲取我在URL中顯示的初始標簽：

    $('#tabs').tabs({
        create: function(event, ui) {
            window.location.hash = ui.panel.attr('id');
        }
    });

這個解決方案似乎正在改變URL，但當我回到URL時，它不會為我切換標簽。 在點擊該URL時，是否必須執行一些特殊操作才能使其切換選項卡？

Answer 6

建立Jeff B的工作......這適用於jQuery 1.11.1。

$("#tabs").tabs(); //initialize tabs
$(function() {
    $("#tabs").tabs({
        activate: function(event, ui) {
            var scrollTop = $(window).scrollTop(); // save current scroll position
            window.location.hash = ui.newPanel.attr('id'); // add hash to url
            $(window).scrollTop(scrollTop); // keep scroll at current position
    }
});
});

Answer 7

這里的其他答案的組合對我有用。

$( "#tabs" ).tabs({
    create: function(event, ui) {
        window.location.hash = ui.panel.attr('id');
    },
    activate: function(event, ui) {
        window.location.hash = ui.newPanel.attr('id');
    }
});

Answer 8

我在我的jQuery響應選項卡中使用此方法來使用活動選項卡對URL進行哈希處理。

$(function() {
       $('#tabs, #subtabs').responsiveTabs({
            activate: function(event, ui) {
            window.location.hash = $("ul li.r-tabs-state-active a").attr("href");
        },
        startCollapsed: 'accordion'
       });
});