title: How to move into next tab using Tab key of keyboard
body: <p>I want to create functionality when user use tab key for moving in to next tab. Every tab contains some text boxes. When user in last text box of tab 1 when it press the tab key, it will go into next text box of tab2. I am creating tab using plain HTML css and jQuery. I am not using tab functionality of jQuery UI but it is latest jquery. The below is my HTML. I am creating tab using ul and li. How I move into next li when my tab in first text box. The tabs contains like dropdown,checkboxes,texboxes. Note : i am not using tabindex due to some issue. i want to create using jquery) </p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;ul class='tabs'&gt;
          &lt;li&gt;&lt;a href='#tab1'&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='#tab2'&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='#tab3'&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;div id='tab1'&gt;
          &lt;ul class= "set2"&gt; 
              &lt;li&gt;  test 1&lt;asp:TextBox runat="server"  ID="test1" /&gt;&lt;/li&gt;
              &lt;li&gt;  test 2&lt;asp:TextBox runat="server"  ID="test2" /&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div id='tab3'&gt;
          &lt;ul class= "set2"&gt; 
              &lt;li&gt;  test 3&lt;asp:TextBox runat="server"  ID="test3" /&gt;&lt;/li&gt;
              &lt;li&gt;  test 4&lt;asp:TextBox runat="server"  ID="test4" /&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div id='tab3'&gt;
          &lt;ul class= "set"&gt; 
              &lt;li&gt;  test 5&lt;asp:TextBox runat="server"  ID="test5" /&gt;&lt;/li&gt;
              &lt;li&gt;  test 6&lt;asp:TextBox runat="server"  ID="test6" /&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p><strong>script</strong></p>
  
  <pre><code>$(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!
    } 
  });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>* {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;
      }
  </code></pre>