我有一个由 jquery scrollTo 插件驱动的 1page 网站,我想这对我来说无关紧要。问题似乎是 1page 设计。如果我单击选项卡,整个设计就会一团糟,因为选项卡会跳转到它可以找到的任何关注点。这包括当前视口区域之外的地方。
实际上,在您单击第一个表单字段后,我不希望选项卡专注于我的#contactForm div 之外的任何内容。该选项卡可以专注于此,但前提是哈希“#contact”在视口内。有没有办法实现这样的事情,或者选项卡/焦点的事情总是弄乱处理视口区域之外内容的 1 页面设计?
也许一些想法可以帮助我更好地理解这个问题
问问题
159 次
1 回答
1
由于我不知道您的 HTML 是什么样子,所以我借用了 ScrollTo 演示。您可以尝试在面板内创建一个具有焦点的链接,强制面板进入视图(演示):
像这样的东西:
$('#pane-target li a').bind('focusin', function() {
$('#pane-target').scrollTo( $(this).closest('li'), 800, {queue: true} );
})
更新了演示以消除绑定和单击后退按钮之间的冲突。
更新:将演示更改为使用您提供的链接中的 HTML/脚本。我不得不对其进行相当多的修改,以使链接不会发生冲突。此外,我将.selected
课程移动到项目而不是仅在第一个面板中的链接。希望我添加了足够的评论以使一切清楚。
$('a').bind('focusin click', function(e){
// focusin occurs before click
if (e.type == 'click') {
var tar = $(this).attr('href');
if ($(this).is('.panel')) {
// clicked on a.panel; scroll to destination
$('#wrapper').scrollTo(tar, 800);
//reset and highlight the clicked link
$('.item').removeClass('selected');
$(tar).addClass('selected');
//cancel the link default behavior
return false;
} else {
// clicked on link (not '.panel'), return true in case it's an external link
return true;
}
} else {
// link was focused
var time, item = $(this).closest('.item');
if (item.is('.selected')){
// if item is already in view (position it immediately)
time = 0;
} else {
// item is not in view, so smoothly scroll & update classes
time = 800;
$('.item').removeClass('selected');
item.addClass('selected');
}
$('#wrapper').scrollTo(item, time);
}
});
于 2010-10-16T13:09:52.440 回答