Question

我正在使用jQuery UI的标签：http://jqueryui.com/demos/tabs/

当用户通过向其添加锚链接点击其他标签时，如何更新浏览器的当前网址： 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

在制表符调用中添加处理程序，以使用制表符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 event，请参阅代码示例的其他答案）。我在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

我必须使用“创建”代替“激活”才能让我的初始标签显示在网址中：

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

此解决方案似乎适用于更改URL，但当我返回到URL时，它不会为我切换标签。当该网址被点击时，我是否必须做一些特别的事情才能让它切换标签？

Answer 6

以Jeff B＆＃39的工作为基础......这适用于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响应选项卡中使用此方法来使用活动选项卡对网址进行哈希处理。

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

jQuery UI选项卡，单击其他选项卡时更新URL

8 个答案: