Question

我添加了以下代码以将哈希值更改为选项卡名称：

$("#tabs > ul").tabs({ 
select: function(event, ui){ 
window.location.hash = ui.tab.hash; 
} 
} );

这在FF3中工作正常，但在IE7中它向下移动页面（取决于从页面顶部附近一直到页面最后选择的选项卡）。

我尝试将其更改为：

$("#tabs > ul").tabs();
$("#tabs > ul").bind("tabsshow", function(event, ui) {
window.location = ui.tab.hash;
})

这导致IE7和FF3中的行为相同，这会将页面向下移动到所选标签的顶部。

我希望更改标签，更新哈希，但页面根本没有移动，这是我在第一个例子中在FF3中的工作原理，但不是在IE7中。

感谢。

备注：JQuery 1.3.1 / JQuery-UI 1.6rc6

Answer 1

如果页面上有一个元素与你设置哈希的内容具有相同的ID，例如你试图将浏览器哈希设置为#cars并且页面上已经有一个div＃cars，浏览器会将您向下滚动到div所在的位置。

据我所知，有3种可能的解决方法

1）将浏览器哈希值更改为其他内容，例如#thecars。

2）以类似的方式更改现有标记。

3）在某些情况下，更改类似命名标记的id，然后更改浏览器哈希，然后将标记名称重新更改为其原始值也应该在理论上有效。这显然是一个糟糕而缓慢的解决方法，只是我想提到它。

Answer 2

你可以尝试“返回假”;设置窗口位置后，我无法确定。

不幸的是，你的问题不会就此结束。在多个浏览器之间来回导航还有其他问题 - 没有什么可能会改变，页面可能会重新加载，页面状态可能会被破坏，javascript可能会重新初始化等等。

您可能需要查看使用Tabs v2插件的History/Remote，尽管jQuery 1.3 +有not been updated。

这个demo更容易理解。如果您查看javascript source，您会注意到使用iframe来处理状态。

还有History Event插件和jHistory插件可以实现您想要的效果。

想要了解事情的结果以及您采用的解决方案。

Answer 3

克里斯建议为我工作的东西，甚至没有任何线索可以通过＃链接。所以我的解决方案非常简单，在show：事件处理程序中，我执行以下操作，它并不完美，因为后退按钮不会在历史记录中，但这是BBQ历史插件的另一项工作。我的所有div都只有id =“tab-cars”，id =“tab-trucks”......删除'tab-'部分并将其放入url hash。

var name = ui.panel.id.substr(4);
location.hash = '#'+name;

更改哈希但不使用jquery ui选项卡移动页面

3 个答案: