3

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

$("#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

4

3 回答 3

4

如果页面上有一个元素与您设置哈希的 id 相同，例如您尝试将浏览器哈希设置为 #cars 并且页面上已经有一个 div#cars，浏览器将向下滚动到该 div 所在的位置。

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

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

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

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

于 2009-12-13T06:30:47.767 回答
2

克里斯的建议对我有用，甚至不知道 div 可以通过 # 链接。所以我的解决方案很简单，在节目中：事件处理程序，我执行以下操作，它并不完美，因为后退按钮不会出现在历史记录中，但这是 BBQ 历史记录插件的另一项工作。我所有的 div 都只有 id="tab-cars", id="tab-trucks"... 去掉 'tab-' 部分并将其放入 url 哈希中。

var name = ui.panel.id.substr(4);
location.hash = '#'+name;
于 2010-12-14T13:52:24.717 回答
2

您可以尝试“return false”；设置窗口位置后，但我不能确定。

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

您可能想查看使用History/Remote插件的Tabs v2 ，尽管它尚未针对 jQuery 1.3+ 进行更新。

这个演示更容易理解。如果您查看 javascript源代码，您会注意到使用 iframe 来处理状态。

还有History Event插件和jHistory插件来实现你想要的。

想听听结果如何以及您采用了什么解决方案。

于 2009-02-21T06:59:58.387 回答