Question

我有一个由jquery scrollTo插件驱动的1page网站，我猜，在我的情况下并不重要。问题似乎是1页设计。如果我单击选项卡，整个设计就会搞乱，因为选项卡跳转到可以找到的任何焦点。这包括当前视口区域之外的位置。实际上，我不希望标签在您单击第一个表单字段后关注除#contactForm div之外的任何内容。该选项卡可以专注于该选项，但仅当散列“#contact”在视口内时。是否有任何方法可以实现类似的东西，或者标签/焦点的东西是否总是搞乱处理视口区域之外的内容的1页设计？

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

Answer 1

由于我不知道您的HTML是什么样的，我借用了ScrollTo演示。您可以尝试在面板内部创建具有焦点的链接，强制面板进入视图（demo）：

这样的事情：

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

更新了演示，以消除绑定和单击后退按钮之间的冲突。

<强>更新：已更改demo以使用您提供的链接处理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);
  }

 });

重点是在1页网站设计上造成问题

1 个答案: