如何使用键盘的Tab键移动到下一个选项卡

Question

我想在用户使用Tab键移入下一个标签时创建功能。每个选项卡都包含一些文本框。当用户在选项卡1的最后一个文本框中按Tab键时，它将进入tab2的下一个文本框。我正在使用纯HTML css和jQuery创建选项卡。我没有使用jQuery UI的tab功能，但它是最新的jquery。以下是我的HTML。我正在使用ul和li创建选项卡。当我的标签放在第一个文本框中时，我如何进入下一个li。选项卡包含类似下拉列表，复选框，texboxes。注意：由于某些问题，我没有使用tabindex。我想用jquery创建）

HTML

<ul class='tabs'>
        <li><a href='#tab1'>Tab 1</a></li>
        <li><a href='#tab2'>Tab 2</a></li>
        <li><a href='#tab3'>Tab 3</a></li>
      </ul>
      <div id='tab1'>
        <ul class= "set2"> 
            <li>  test 1<asp:TextBox runat="server"  ID="test1" /></li>
            <li>  test 2<asp:TextBox runat="server"  ID="test2" /></li>
        </ul>
      </div>
      <div id='tab3'>
        <ul class= "set2"> 
            <li>  test 3<asp:TextBox runat="server"  ID="test3" /></li>
            <li>  test 4<asp:TextBox runat="server"  ID="test4" /></li>
        </ul>
      </div>
      <div id='tab3'>
        <ul class= "set"> 
            <li>  test 5<asp:TextBox runat="server"  ID="test5" /></li>
            <li>  test 6<asp:TextBox runat="server"  ID="test6" /></li>
        </ul>
      </div>

脚本

$(document).on('keypress',function(e) {
 var keyCode = e.keyCode || e.which; 
 if (keyCode == 9) {       //if the key pressed was 'tab'...
    e.preventDefault(); 
    //how to focus on the next tab, 
    //remember to select the very first tab when you reach the last tab!
  } 
});

CSS

* {padding:0; margin:0;}

    html {
        background:url(/img/tiles/wood.png) 0 0 repeat;
        padding:15px 15px 0;
        font-family:sans-serif;
        font-size:14px;
    }

    p, h3 { 
        margin-bottom:15px;
    }

    div {
        padding:10px;
        width:600px;
        background:#fff;
    }

    .tabs li {
        list-style:none;
        display:inline;
    }

    .tabs a {
        padding:5px 10px;
        display:inline-block;
        background:#666;
        color:#fff;
        text-decoration:none;
    }

    .tabs a.active {
        background:#fff;
        color:#000;
    }