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

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，然后更改浏览器哈希，然后将标记名称重新更改回其原始值，理论上也应该有效。这显然是一个糟糕而缓慢的解决方法，只是想我会提到它。