My project involves creating tabs with HTML, CSS, and jQuery, without using jQuery UI. I am facing a problem where the tab is not moving to the next tab's text boxes when the user navigates through them. The code can be found on Pastebin and JS Fiddle, but I cannot figure out what is causing this issue. If you need any clarification, feel free to ask.
The current behavior is that when the user reaches the last text box in one tab and presses the Tab key, it should move to the first element of the next tab (e.g., textbox/dropdown). However, this functionality is not working as intended. I have avoided using tabindex and would like to solve this using jQuery.
If you want to check out a live demo, you can visit the following link: [Demo][1] or view the code on Pastebin: http://pastebin.com/E85NsNtg
(document).ready(function () { $('ul.tabs').each(function () { var $active, $content, $links = $(this).find('a'); if ($('#_ctl0_hdnCurrentTabSelection').val() == "") { $('#_ctl0_hdnCurrentTabSelection').val(location.hash) } $active = $($links.filter('[href="' + $('#_ctl0_hdnCurrentTabSelection').val() + '"]')[0] || $links[0]); $active.addClass('active'); $content = $($active.attr('href')); window.location.href = window.location.href.toString().split('#')[0] + $active.attr('href'); $links.not($active).each(function () { $($(this).attr('href')).hide(); }); $(this).on('click', 'a', function (e) { $active.removeClass('active'); $content.hide(); $active = $(this); $('#_ctl0_hdnCurrentTabSelection').val($active.attr("href")) $content = $($(this).attr('href')); window.location.href = window.location.href.toString().split('#')[0] + $active.attr('href'); $active.addClass('active'); $content.show(); e.preventDefault(); }); }); $(document).on('keydown',function(e) { var keyCode = e.keyCode || e.which; if (keyCode === 9) { // Tab navigation logic here e.preventDefault(); }); });