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