通过命名锚点导航长选项卡面板时，jQuery 选项卡滚动到视图之外

发布于 2024-12-10 05:37:51 字数 791 浏览 0 评论 0原文

看看这个小提琴：

这个想法是仅在 js 可以运行时创建选项卡，以保持页面对非 js 用户友好。否则，我想将页面呈现为一堆 div。选项卡列表完全自动化，具体取决于选项卡数量，并且每个选项卡根据相应的 div id 属性命名。

一切都运行良好，但现在我正在尝试重新设计单击事件以更普遍地导航选项卡。之前，我只是在列表项选项卡之一 (li) 上查找单击事件，然后运行必要的代码来更改选项卡。

但现在我想让这个函数更加通用，这样当用户单击哈希值等于选项卡 ID 之一的任何锚点时它就可以工作，而无需定位实际选项卡。我不确定如何在锚点中定位哈希并根据选项卡 ID 对其进行测试。我得到的功能在 FF 和 IE 中都可以用于单击选项卡和单击锚链接（例如，Tab 1）。但是，如果选项卡比视口长，则选项卡顶部会滚动到窗口顶部，导致选项卡链接消失。用户必须手动将选项卡链接滚动回视图中才能导航到另一个选项卡。我尝试过 .scrollTo() 将页面移回原位，但没有成功。

这只是 .scrollTo 的问题还是我对点击功能的处理完全错误？

将不胜感激任何想法。奖金，如果它能动画就太好了。

http://jsfiddle.net/contendia/GBTAS/

原文

分享到QQ

分享到微博

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

发布评论

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

人海汹涌 2024-12-17 05:37:51

好吧，给你......我听说这对你不起作用，但对我来说非常有效。这是点击处理程序，当点击选项卡链接时会触发，它会添加哈希值，如您所见。如果没有“scrollTo()”，滚动就像您所描述的那样......有了它，问题就消失了。我得出的结论是，由于某种原因设置 href 会滚动浏览器视口。

j('#tabs ul li a').click(function () {
    location.hash = j(this).attr('href');
    window.scrollTo(0, 0);
}); // Add click handler to set # in address bar

Ok, here you go.. I hear you that this doesn't work for you, but it works perfectly for me. Here's the click handler which fires when they hit a tab link, and it adds the hash as you can see. Without the "scrollTo()" the scrolling is as you describe... with it, the problem goes away. I conclude then that setting the href for some reason scrolls the browser viewport.

j('#tabs ul li a').click(function () {
    location.hash = j(this).attr('href');
    window.scrollTo(0, 0);
}); // Add click handler to set # in address bar

回复收藏 0 原文

~没有更多了~