Question

我正在关注本教程：http://www.jacklmoore.com/notes/jquery-tabs/

我在标签1,2,3中创建了文本框。我想在按下Tab键后第一个选项卡中的用户创建一个函数，它将移动到下一个选项卡。我怎么能做到这一点。我正在使用asp.net文本框并在选项卡中下拉列表。我给输入标签索引，但它没有工作。我想用jquery做这个。这个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>
            * {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>

Answer 1

我认为没有tabindex这样做的基本配方（你为什么要这么做？）会是这样的：

$(document).on('keypress',function(e) {
 var keyCode = e.keyCode || e.which; 
 if (keyCode == 9) {       //if the key pressed was 'tab'...
    e.preventDefault(); 
    //put code here to focus on the next tab, 
    //probably using http://api.jquery.com/focus/ .focus()
    //remember to select the very first tab when you reach the last tab!
  } 
});

感谢这个答案：jQuery: How to capture the TAB keypress within a Textbox

Answer 2

$(document).ready(function() {
 $('input:text:first').focus();
 $('input:text').bind("keydown", function(e) {enter code here
    var n = $("input:text").length;
    if (e.which == 9)
    {enter code here e.preventDefault();
      var nextIndex = $('input:text').index(this) + 1;`enter code here`
      if(nextIndex < n)
      {
        $('input:text')[nextIndex].focus();
      }
      else
      {
        $('input:text')[nextIndex-1].blur();
        $('#btnSubmit').click();
      }
    }
  });
  $('#btnSubmit').click(function() {
     alert('Form Submitted');
  });

如何使用Tab键移动到下一个选项卡

2 个答案: