如何在选择jQuery选项卡时正确更新URL哈希
How to properly update URL hash upon selecting a jQuery tab?
HTML:
<div id="tabs">
<ul>
<li><a href="#settings">Settings</a></li>
<li><a href="#fields">Fields</a></li>
</ul>
<div id="settings">
//Tab Contents
</div>
<div id="fields">
//Tab Contents
</div>
</div>
如何应用jQueryUI的选项卡功能,并在选择新选项卡时强制它更新URL哈希?
使用此代码创建jQuery UI选项卡:
$('#tabs').tabs({
beforeActivate: function (event, ui) {
window.location.hash = ui.newPanel.selector;
}
});
我之所以创建这个答案,是因为我找不到一个具有最新方法的答案。希望这能帮助其他人!
除了更新选项卡更改时的哈希(使用shraggernaut回复中的beforeActivate事件)之外,更新哈希更改时的活动选项卡非常有用(即启用浏览器历史记录、后退/前进按钮和用户手动键入哈希):
$(window).on('hashchange', function () {
if (!location.hash) {
$('#tabs').tabs('option', 'active', 0); // activate first tab by default
return;
}
$('#tabs > ul > li > a').each(function (index, a) {
if ($(a).attr('href') == location.hash) {
$('#tabs').tabs('option', 'active', index);
}
});
});
相关文章:
- 更新URL时使用Javascript函数显示日期
- 更新 url 而不重新加载,具体取决于使用 jquery/javascript 选择的复选框
- Angular/UI路由器-如何在不刷新所有内容的情况下更新URL
- 在不重新加载页面的情况下更新 URL 哈希
- 通过添加值1更新URL
- 修改req.url;t更新url参数(req.query)
- 猫头鹰轮播2 在拖动时更新 URL 哈希导航
- 在不触发状态更改的情况下更新 URL
- 我需要一些关于PHP的帮助,并在“?”之后更新URL
- 使用 JavaScript 更新 URL 不起作用
- 从 iFrame 内部更新 URL
- 动态更新 url/html 标题时,如何获得类似 facebook 的按钮来注册更改?(不是 fb:like 中的 hr
- 如何使用AngularJS中的下拉列表来更新URL以从中抓取图片
- 使用JS/RRails和下拉表单更新URL查询字符串
- 如何在不使用JavaScript刷新整个PHP页面的情况下更新url
- 如何在Angular文件上传模块中更新URL路径
- 使用jquery显示/隐藏功能更新url
- 在jquery中用两个下拉列表更新URL
- 如何在选择jQuery选项卡时正确更新URL哈希
- 更新url中的两个参数