I am following this tutorial: http://www.jacklmoore.com/notes/jquery-tabs/

In which i created text boxes in tab 1,2,3. i want to create a function when user in first tab after pressing the tab key it will move in to next tab. How i can do this. I am using asp.net text boxes and drop down list in tabs. I was give tab index to inputs but it was not working. I want to do this using jquery.

$('ul.tabs').each(function(){ // For each set of tabs, we want to keep track of // which tab is active and it's associated content var $active, $content, $links = $(this).find('a'); // If the location.hash matches one of the links, use that as the active tab. // If no match is found, use the first link as the initial active tab. $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]); $active.addClass('active'); $content = $($active.attr('href')); // Hide the remaining content $links.not($active).each(function () { $($(this).attr('href')).hide(); }); // Bind the click event handler $(this).on('click', 'a', function(e){ // Make the old tab inactive. $active.removeClass('active'); $content.hide(); // Update the variables with the new link and content $active = $(this); $content = $($(this).attr('href')); // Make the tab active. $active.addClass('active'); $content.show(); // Prevent the anchor's default click action e.preventDefault(); }); });

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'> <p>Hi, this is the first tab.</p> </div> <div id='tab2'> <p>This is the 2nd tab.</p> </div> <div id='tab3'> <p>And this is the 3rd tab.</p> </div>

style




<style> * {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; } </style>