如何使用 Tab 键激活下一个选项卡及其内容

Question

您好，我正在使用 ul 和 li 创建一个 jquery 选项卡。我想在用户按下 tab 键时使用 onblur 创建一个函数，它将移至下一个选项卡。我想当用户在选项卡 1 的最后一个文本框中按下选项卡键时，它将移动到下一个选项卡并激活其内容。我正在使用 jquery 而不是 jquery ui 创建选项卡。我没有为此使用标签索引。我想写一个函数 onblur 事件。

注意：

 <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" onBlur(); 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"  onBlur(); 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"  onBlur(); ID="test6" /></li>
                </ul>
              </div>

脚本

$(document).ready(function () {
    alert("You are running jQuery version: " + $.fn.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.

        if ($('hdnCurrentTabSelection.ClientID').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');

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

This is fiddle

Answer 1

我只是发布基本示例

jsfiddle：

http://jsfiddle.net/tsANm/1/

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' class="tabclass">
            <ul class= "set2"> 
                <li>test 1<input type="text" id="test1" tabindex="1"></li>
                <li>test 2<input type="text" id="test2" tabindex="2"></li>
            </ul>
        </div>
        <div id='tab2' class="tabclass">
            <ul class= "set2"> 
                <li>test 3<input type="text" id="test3" tabindex="3"></li>
                <li>test 4<input type="text" id="test4" tabindex="4"></li>
            </ul>
        </div>
        <div id='tab3' class="tabclass">
            <ul class= "set2"> 
                <li>test 5<input type="text" id="test5" tabindex="5"></li>
                <li>test 6<input type="text" id="test6" tabindex="6"></li>
            </ul>
        </div>

css：

* {
    padding:0;
    margin:0;
}
html {
    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;
}

jquery：

function reset() {
    $(".tabclass").hide();
    $("#tab1").show();
    $("#test1").focus();
    $("ul.tabs li a:first").addClass("active");
}
$(function() {
    reset();    
    $("ul.tabs li a").on("click", function() {
        i=0;
        $(".tabclass").hide();
        $("ul.tabs li a").removeClass("active");
        $(this).addClass("active");
        $($(this).attr("href")).show();
    });

    var i = 0;
    var j = $(".tabclass").length;
    $("ul.set2 li input[type=text]").on("blur", function() {
        var inputFields = $(this).parents(".set2").find("input[type=text]").length;
        i++;
        if (i === inputFields) {
            var tabNum = parseInt($(this).parents(".tabclass").attr("id").toString().substring(3,4));
            $(".tabclass").hide();
            $("ul.tabs li a").removeClass("active");
            $("a[href=#" + $(this).parents(".tabclass").next().attr("id") + "]").addClass("active");
            $(this).parents(".tabclass").next().show();            
            $(this).parents(".tabclass").next().find("input[type=text]:first").focus();            
            i = 0;                       
            if (j === tabNum) {
                reset();
            }
        }
    });
});