0

我有一个由 jquery scrollTo 插件驱动的 1page 网站，我想这对我来说无关紧要。问题似乎是 1page 设计。如果我单击选项卡，整个设计就会一团糟，因为选项卡会跳转到它可以找到的任何关注点。这包括当前视口区域之外的地方。
实际上，在您单击第一个表单字段后，我不希望选项卡专注于我的#contactForm div 之外的任何内容。该选项卡可以专注于此，但前提是哈希“#contact”在视口内。有没有办法实现这样的事情，或者选项卡/焦点的事情总是弄乱处理视口区域之外内容的 1 页面设计？

也许一些想法可以帮助我更好地理解这个问题

4

1 回答 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 回答