jQuery UI选项卡，单击其他选项卡时更新URL
我正在使用jQuery UI的选项卡： http ： //jqueryui.com/demos/tabs/
当用户通过添加锚链接点击其他选项卡时，如何更新浏览器的当前URL： ex：url.html＃tab-4并同时推送浏览器的当前历史记录。
谢谢！
这应该得到你想要的（使用jQuery UI 1.8 ，在1.9及更高版本中使用activate事件 ，请参阅代码示例的其他答案）。 我在jQuery UI演示中使用了示例HTML;
$( "#tabs" ).tabs({ select: function(event, ui) { window.location.hash = ui.tab.hash; } }); 对于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/
首先，我们需要更新选项卡更改的哈希值（这是最新的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); } }); });
我不得不使用“创建”而不是“激活”来获取我在URL中显示的初始标签：
$('#tabs').tabs({ create: function(event, ui) { window.location.hash = ui.panel.attr('id'); } });
这个解决方案似乎正在改变URL，但当我回到URL时，它不会为我切换标签。 在点击该URL时，是否必须执行一些特殊操作才能使其切换选项卡？
$( "#tabs" ).tabs({ activate: function(event, ui) { //Key => random string //url => URL you want to set window.history.pushState({key:'url'},'','url'); } });
建立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 } }); });
这里的其他答案的组合对我有用。
$( "#tabs" ).tabs({ create: function(event, ui) { window.location.hash = ui.panel.attr('id'); }, activate: function(event, ui) { window.location.hash = ui.newPanel.attr('id'); } });
我在我的jQuery响应选项卡中使用此方法来使用活动选项卡对URL进行哈希处理。
$(function() { $('#tabs, #subtabs').responsiveTabs({ activate: function(event, ui) { window.location.hash = $("ul li.r-tabs-state-active a").attr("href"); }, startCollapsed: 'accordion' }); });