Javascript 使用Tab键和鼠标单击导航滑动窗体

我头痛！我已经在这个代码上工作了几个小时了，我不知道为什么它不工作。我有一个分为多个部分的表单，当一个部分完成后，用户可以单击导航栏中的下一个选项卡，进入表单的下一部分。下一部分滑入，用户可以继续使用表单。当使用鼠标单击作为函数的操作时，这很好，但是，如果用户使用“Tab”键进行导航，则滑动窗体无法正确、完整地滑入。我留下了表单前一部分的一部分，以及表单的当前部分。这是我目前为止使用的鼠标点击代码：

$('#navigation a').bind('click',function(e){
    var $this   = $(this);
    var prev    = current;
    $this.closest('ul').find('li').removeClass('selected');
    $this.parent().addClass('selected');
    /*
    we store the position of the link
    in the current variable 
    */
    current = $this.parent().index() + 1;
    /*
    animate / slide to the next or to the corresponding
    fieldset. The order of the links in the navigation
    is the order of the fieldsets.
    Also, after sliding, we trigger the focus on the first 
    input element of the new fieldset
    If we clicked on the last link (confirmation), then we validate
    all the fieldsets, otherwise we validate the previous one
    before the form slided
    */
    $('#steps').stop().animate({
        marginLeft: '-' + widths[current-1] + 'px'
    },500,function(){
        if(current == fieldsetCount)
            validateSteps();
        else
            validateStep(prev);
        $('#formElem').children(':nth-child('+ parseInt(current) +')').find(':input:first').focus();    
    });
    e.preventDefault();
});

现在，当我尝试使用“Tab”键时，我使用了这段代码（和/或这段代码的变体），但似乎什么都不起作用：

$('#navigation a').bind('keypress',function(e){
    var $this   = $(this);
    var prev    = current;
    $this.closest('ul').find('li').removeClass('selected');
    $this.parent().addClass('selected');
    /*
    we store the position of the link
    in the current variable 
    */
    current = $this.parent().index() + 1;

    var $fieldset = $(this);
    $fieldset.children(':last').find(':input').keypress(function(e){
        if (e.keyCode == 9){
            $('#steps').stop().animate({
        marginLeft: '-' + widths[current-1] + 'px'
    },500,function(){
        if(current == fieldsetCount)
            validateSteps();
        else
            validateStep(prev);
        $('#formElem').children(':nth-child('+ parseInt(current) +')').find(':input:first').focus();    
    });
            e.preventDefault();
        }
    });
});

您可以在JSFIDLE上看到它是如何工作的，而不是如何工作的：

非常感谢您的帮助

这里有几件事。我已更改您将事件绑定到的内容。由于某种原因，您已将其添加到导航中，因此它从未触发。我已经改变了一点，所以它被绑定到每个字段集的最后一个输入（仅-不选择）。我还使用了

keydown

而不是

keypress

请注意，您已经完全禁用了shift tabbing，我建议您添加另一个绑定，以确定您所处的方向。事实上，有一种更简单的方法可以实现这一点，它可以绑定到更多的地方，但在其他方面干扰性较小。我不推荐这个，因为我不知道你的表格的范围。如果你有兴趣，请告诉我

---

希望这能有所帮助，如果我有任何错误或不清楚的地方，请留言。

@Inrbob谢谢！我试图使用与鼠标点击相同的代码结构，但显然不起作用！因此，要创建一个绑定方法来利用shift+tab方法向后移动，我是否只需要使用几乎相同的代码来更改id语句中的条件和幻灯片发生的方向？我很想知道您知道的另一种将密钥绑定到事件的方法。再次感谢！别担心。我以前使用过的另一种方法是将焦点侦听器绑定到每个输入。然后，当它触发时，会出现一个简单的“如果”，以查看当前区域是否可见，如果不可见，则将正确的区域滑入。我开始了一个快速的模型，但我认为可能有很多变化，由于您当前的设置需要。问题在于，当您将焦点交给某个元素时，它将跳入视图。我通常使用

display:none

或类似的方法隐藏非活动元素