在按下选项卡时，它不会移动到下一个选项卡

我正在使用html css和jquery创建选项卡。 我没有使用jquery ui。 让我解释一下这个问题。

在选项卡中有许多选项卡。每个选项卡包含texbox，下拉列表，复选框等，例如当用户在第一个选项卡中时。 在此选项卡中有文本框。 当用户按Tab键时到达最后一个文本框时，它将移动到下一个标签的第一个元素（如文本框/下拉列表等）。我创建了这个，但它没有移动到标签文本框。 代码在pastebin和js小提琴上可用。 我找不到我的代码有什么问题。 如果你需要任何澄清，请问我

注意：请不要建议tabindex。 我想用jquery做。

链接： 关于jsfiddle粘贴盒的演示 ： – http://pastebin.com/E85NsNtg

      * {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; }       
 
 
Tab 1
 
Tab 2
 
Tab 3
 
Tab 4
 
Tab 5
 
Tab 6
 
 
 
Section 1
 Fisrt:  
 Second:  
 Third:  
 Fourth:  
 
 
Section 2
 Fifth:  
 Sixth:  
 
 
Section 3
 Seventh:  
 Eighth:  
 
 
Section 4
 ninth:  
 tength:  
 
 
section 5
 11:  
 12:  
 
 
section 6
 13:  
 14:  
   

jQuery的

 $(document).ready(function () { $('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 ($('#_ctl0_hdnCurrentTabSelection').val() == "") { $('#_ctl0_hdnCurrentTabSelection').val(location.hash) } // 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="' + $('#_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'); // 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'); //window.location.href = window.location.href.toString().replace($active.attr('href'), ''); $content.hide(); // Update the variables with the new link and content $active = $(this); $('#_ctl0_hdnCurrentTabSelection').val($active.attr("href")) $content = $($(this).attr('href')); window.location.href = window.location.href.toString().split('#')[0] + $active.attr('href'); // Make the tab active. $active.addClass('active'); $content.show(); // Prevent the anchor's default click action e.preventDefault(); }); }); $(document).on('keydown',function(e) { var keyCode = e.keyCode || e.which; if (keyCode === 9) { if(!$('#tab1:last-child').is(':focus') && window.location.href.search('tab1') != -1){ $('#ATab1').removeClass('active'); $('#ATab2').addClass('active'); $('#tab1').hide(); $('#tab2').show(); $('#tab3').hide(); $('#tab4').hide(); $('#tab5').hide(); window.location = "#tab2"; } else if(!$('#tab2:last-child').is(':focus') && window.location.href.search('tab2') != -1){ $('#ATab2').removeClass('active'); $('#ATab3').addClass('active'); $('#tab1').hide(); $('#tab2').hide(); $('#tab3').show(); window.location = "#tab3"; } else if(!$('#tab3:last-child').is(':focus') && window.location.href.search('tab3') != -1){ $('#ATab3').removeClass('active'); $('#ATab4').addClass('active'); $('#tab1').hide(); $('#tab2').hide(); $('#tab3').hide(); $('#tab4').show(); window.location = "#tab4"; } else if(!$('#tab4:last-child').is(':focus') && window.location.href.search('tab4') != -1){ $('#ATab4').removeClass('active'); $('#ATab5').addClass('active'); $('#tab1').hide(); $('#tab2').hide(); $('#tab3').hide(); $('#tab4').hide(); $('#tab5').show(); window.location = "#tab5"; } else if(!$('#tab5:last-child').is(':focus') && window.location.href.search('tab5') != -1){ $('#ATab5').removeClass('active'); $('#ATab6').addClass('active'); $('#tab1').hide(); $('#tab2').hide(); $('#tab3').hide(); $('#tab4').hide(); $('#tab5').hide(); $('#tab6').show(); window.location = "#tab6"; } else if(!$('#tab6:last-child').is(':focus') && window.location.href.search('tab6') != -1){ $('#ATab6').removeClass('active'); $('#ATab1').addClass('active'); $('#tab1').show(); $('#tab2').hide(); $('#tab3').hide(); $('#tab4').hide(); $('#tab5').hide(); $('#tab6').hide(); $('#tab7').hide(); window.location = "#tab1"; } } e.preventDefault(); }); }); 

Answer 1

请在您的网站上添加jquery最新版本

这是代码（请放在标签上）： –

Answer 2

您正在使用jQuery语法，但您没有在html中引用jQuery库。 确保在title元素下添加此行

Answer 3

您可以使用children选择器： http ： //jsfiddle.net/Eq3Kn/

  $content.show(); $content.children('input').eq(0).focus(); 

注意：我已经实现了从tab1到tab2的点击和键盘导航的焦点代码。