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'
       });
});