Question

我想在用户使用Tab键移入下一个标签时创建功能。每个选项卡都包含一些文本框。当用户在选项卡1的最后一个文本框中按Tab键时，它将进入tab2的下一个文本框。我正在使用纯HTML css和jQuery创建选项卡。我没有使用jQuery UI的tab功能，但它是最新的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

试试这个：

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

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

在jQuery UI选项卡中设置默认选项卡

更新自jQuery UI 1.9

不推荐使用select方法，而只是更新活动选项。

您应该通过调用option方法替换对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一段时间。

如何使用tab键在下一个选项卡中设置焦点？

5 个答案: