jQuery 工具如何工作？ tabs 组件防止锚点跳转？

发布于 2024-12-23 16:41:30 字数 1406 浏览 3 评论 0原文

我正在测试选项卡插件，我想做的一件事是，当用户单击带有选项卡哈希的链接（来自外部站点或页面内部）时，浏览器不会跳转到选项卡的位置，而是相反，切换到它。

这就是 jQuery Tools 的选项卡组件的工作方式。如果您单击下面的链接，窗口将不会滚动并显示相关选项卡：

http://flowplayer.org/tools/demos/tabs/anchors.html#first

http://flowplayer.org/tools/demos/tabs/anchors.html#second

http://flowplayer.org/tools/demos/tabs/anchors.html#third

将其与下面的 jQuery UI Tabs 演示进行比较。打开页面时窗口会滚动：

http://jqueryui.com/demos/tabs/ #tabs-1

http://jqueryui.com/demos/tabs/#tabs-2

http://jqueryui.com/demos/tabs/#tabs-3

其中之一SO 上类似问题的答案在 document.ready 处理程序中建议了这一点：

setTimeout(function() {
  if (location.hash) {
    window.scrollTo(0, 0);
  }
}, 1);

这有效，但与 flowplayer.org 相比，滚动非常明显。我想知道flowplayer.org的脚本是如何达到如此完美的效果的？查看他们的演示代码后我找不到任何东西。任何帮助表示赞赏，谢谢！

原文

I'm testing out tab plugins and one thing I'd like to do is when the user clicks a link (from external sites or inside the page) with a tab's hash, the browser would not jump to the position of the tab, but instead switch to it.

This is how jQuery Tools' tab component does it. If you click the links below, the window would not scroll and the relevant tab is displayed:

http://flowplayer.org/tools/demos/tabs/anchors.html#first

http://flowplayer.org/tools/demos/tabs/anchors.html#second

http://flowplayer.org/tools/demos/tabs/anchors.html#third

Compare it with jQuery UI Tabs demo below. The window would scroll upon opening the page:

http://jqueryui.com/demos/tabs/#tabs-1

http://jqueryui.com/demos/tabs/#tabs-2

http://jqueryui.com/demos/tabs/#tabs-3

One of the answers to similar questions on SO suggested this inside the document.ready handler:

setTimeout(function() {
  if (location.hash) {
    window.scrollTo(0, 0);
  }
}, 1);

This works but the scrolling is very noticable compared to flowplayer.org's. I'm wondering how does flowplayer.org's script achieve this perfect effect? After looking through their demo code I could not find anything. Any help is appreciated, thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

奢望 2024-12-30 16:41:30

由于 jquery 的演示使用具有设置 id 属性的元素，而 flowplayer 演示似乎没有任何内容，因此我相信没有“跳跃”。然而，我一生都无法弄清楚锚是如何/为何被认可的。我怀疑它与 jquery 本身有什么关系，因为唯一的行确实是 $("ul.tabs").tabs("div.panes > div"); 但我可能是错的，其他人可以提供一些线索。

编辑：不正确jquery确实在内部使用windows.location.hash并且确实针对href属性“使用”它。

回复收藏 0 原文

~没有更多了~