Jquery focus在1页网站设计上引发问题

我有一个由jquery scrollTo插件驱动的1页网站，我想这对我来说并不重要。问题似乎在于1页的设计。如果我点击标签，整个设计都会一团糟，因为标签会跳转到任何它能找到的焦点。这包括当前视口区域之外的位置。
实际上，在单击第一个表单字段后，我不希望选项卡关注除my#contactForm div之外的任何内容。该选项卡可以集中于此，但前提是散列“#contact”在视口中。有没有办法实现类似的功能，或者选项卡/焦点总是会弄乱处理视口区域以外内容的1页设计？

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

因为我不知道你的HTML是什么样子，所以我借用了Scroll来演示。您可以尝试创建一个在面板内具有焦点的链接，以强制面板进入视图（）：

大概是这样的：

$('#pane-target li a').bind('focusin', function() {
    $('#pane-target').scrollTo( $(this).closest('li'), 800, {queue: true} );
})

更新了演示，以消除绑定和单击“上一步”按钮之间的冲突

---

更新： 已更改为使用您提供的链接中的HTML/Script。我不得不修改它相当多，这样链接就不会冲突。另外，我将

.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);
  }

 });

---

如果你能提供一个链接或代码示例，这会有所帮助。很抱歉，当时它只是本地的，太复杂了，无法粘贴任何内容。它是一个垂直/水平滑动的网站，使用不同的面板（部分）填充视口，如“主页”、“联系人”、“关于”。在“正常使用”下，单击“链接”按钮可到达这些面板（部分）。就像你通常在菜单中看到的那样，但是tab键把一切都搞乱了。假设您当前正在查看#主页部分。如果您使用tab键，视口会突然跳出#主页部分，将另一个元素聚焦到某个地方，然后您看到的只是一个被破坏的设计。只有了解这种网站设计的人才会知道我在说什么。有人吗？嗨，哈迪，我更新了我的答案并提供了一个演示。。。希望我选择了正确的版本。哦，JSFIDLE上的演示比我在本地的版本更“急促”。嗨，哈迪，我不能不看你的HTML，因为它与原始代码不一样-空面板可以工作。试试这个：。。。我删除了所有额外的

id=“item”

，因为id应该是唯一的。我不得不为nivo滑块注释了几行代码，这样演示就可以了。差不多了，但不是100%。我在JSFIDLE中的脚本中添加了3条注释。它们以########开始和结束。你会看到的。第一个是关于相关链接，第二个是关于停止nivo滑块。这是缺失的，第三是关于一个完整部分被忽略的感觉。我的实时测试是双向滚动的，但它不应该这样做，因为选项“queue”设置为true，这使它水平滚动，然后停止，然后垂直滚动，而不是锯齿形滚动。另外，我添加了行“stop nivo”，nivo确实停止，但不会再次开始。所以我认为整个部分都被忽略了。你能听懂吗？