Как перемещаться по вкладкам jquery ui с помощью клавиатуры

Question

Я реализую функцию jquery для вкладок. Вкладка содержит текстовые поля. После заполнения текстового поля. когда пользователь перемещается с использованием клавиатуры в следующую вкладку, он переходит к следующей вкладке после нажатия клавиши табуляции. Я написал код ниже, но я не получаю выход. Что я делаю неправильно?

это мой J скрипт запроса

$(document).ready(function() { 
    $("#tabs").tabs(); 
    $("body").keyup(function (e) { 
     var direction = null; 
     if (e.keyCode == 37) { 
      direction = 'prev'; 
     } 
     if (e.keyCode == 39 || e.keyCode == 9) { 
      alert("test"); //direction='next'; 
     } 
     if (direction != null) { 
      var totaltabs = $('#tabs').tabs('length'); //gettting the total # of tabs 
      var selected = $('#tabs').tabs('option', 'selected'); //getting the currently selected tab 
      if (direction == 'next') { 
       if (selected <= totaltabs - 1) 
        $('#tabs').tabs('select', selected + 1) 
      } else { 
       if (selected != 0) 
        $('#tabs').tabs('select', selected - 1) 
      } 
     } 
    }); 
}); 

это мой HTML-код

<div id="tabs"> 
    <ul class="tabNavigation"> 
     <li><a href="#first">tab-1</a> 
     </li> 
     <li><a href="#second">tab-2</a> 
     </li> 
     <li><a href="#third">tab-3</a> 
     </li> 
    </ul> 
    <div id="first">First name: 
     <input type="text" name="fname"> 
     <br> 
     <br>Last name: 
     <input type="text" name="lname"> 
     <br> 
    </div> 
    <div id="second">City 1: 
     <input type="text" name="city1"> 
     <br> 
     <br>City 2: 
     <input type="text" name="city2"> 
     <br> 
    </div> 
    <div id="third"> 
     <p>tab 3</p> 
    </div> 
</div> 

благодаря

Answer 1

$(document).ready(function() { 
    $("#tabs").tabs({ 
     activate: function(event, ui) { 
      ui.newPanel.find('input').eq(0).focus(); 
     } 
    }); 

    $("#tabs .ui-tabs-panel").each(function() { 
     $(this).find('input').last().on('keydown', function(e) { 
      var totaltabs = $('#tabs').tabs('length'); 
      var selected = $('#tabs').tabs('option', 'selected'); 

      if(e.keyCode === 9 && !e.shiftKey) { 
       selected = (selected + 1) % totaltabs; 
       $('#tabs').tabs('select', selected); 
       return false; 
      } 
     }); 

     $(this).find('input').first().on('keydown', function(e) { 
      var totaltabs = $('#tabs').tabs('length'); 
      var selected = $('#tabs').tabs('option', 'selected'); 

      if(e.keyCode === 9 && e.shiftKey) { 
       selected = selected - 1 > -1 ? selected - 1 : totaltabs - 1; 
       $('#tabs').tabs('select', selected); 
       return false; 
      } 
     }); 
    }); 
});