How to navigate in jquery ui tabs using keyboard

Question

I am implementing the jquery functionality for tabs. The tab one contains a text boxes.after filling the text box. when user moves using keyboard into next tab it will go to next tab after pressing the tab key. I was write the below code but I am not getting the output. What I am doing wrong?

this is my j query script

$(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)
            }
        }
    });
});

this is my html code

<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>

thanks

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