如何使用Tab鍵在下一個選項卡中設置焦點？

Question

我想在用戶使用Tab鍵移動到下一個選項卡時創建功能。每個選項卡都包含一些文本框。當用戶在標籤1的最後一個文本框中按下標籤鍵時，它將進入標籤2的下一個文本框。我使用純HTML HTML和jQuery創建標籤。我沒有使用jQuery UI的選項卡功能，但它是最新的jQuery。以下是我的HTML。我使用ul和li創建標籤。當我在第一個文本框中選擇標籤時，如何進入下一個li。這些標籤包含像下拉菜單，複選框，texboxes。 注意：由於某些問題，我沒有使用tabindex。我想創建使用jQuery）

<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> 

腳本

// Wait until the DOM has loaded before querying the document 
    $(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 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(); 
    }); 
    }); 

$(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! 
    } 
}); 
    }); 
      </script> 

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; 
    } 

Answer 1

請看看http://aeonit.name/RND/blur_hover_detect_tabs/ 或 http://mraje.in/mraje/rnd/blur_hover_detect_tabs/

我做了這樣的事情。你可以幫助這個...

Answer 2

只是一味

$('selector').focus(); 

此外，

$(document).on('keypress',function(e) { 
    var keyCode = e.keyCode || e.which; 
    if (keyCode == 9) {  //if the key pressed was 'tab'... 
     e.preventDefault(); 
     if($(this).nextAll('input').length === 0) { 
       // this is the last input element 
       $('input[type=text]:enabled:first').focus();// first textbox 
     } 
     else 
     { 
       $(this).next('input').focus(); 
     } 
    } 
}); 

Answer 3

試試這個：在jQuery UI的標籤

$('.tabs').tabs("option", "active", 1); 
or 

$('.tabs').tabs({active, 1}); 

設置默認選項卡

UPDATE由於jQuery UI的1.9

的選擇方法，取而代之的被棄用只是更新活動選項。

您應該用調用選項方法來替換對select方法的所有調用以更改活動選項。

低於版本jQuery UI的1.9

$('ele').tabs('select', index); 

或jQuery的的 使用對焦方法

$("#target").focus(); 

感謝，

溼婆

Answer 4

你檢查tabindex屬性？我認爲這可能對您的情況有一定用處。請檢查此example的使用情況。

<div class="tab" tabindex="1">Tab 1</div> 
<div class="tab" tabindex="3">Tab 3</div> 
<div class="tab" tabindex="5">Tab 5</div> 
<div class="tab" tabindex="4">Tab 4</div> 
<div class="tab" tabindex="2">Tab 2</div> 

Answer 5

我同意Niranjan。 'tabindex'屬性是正確的選項，使用起來非常簡單。讓jQuery保持一段時間。