Question

我在TextBox（ID =＆＃34; txtMainCat＆＃34;）TabIndex = 101中单击TabKey后，有以下引导代码片段，我想打开其他选项卡TabIndex = 102，目前它没有，

<div class="bs-example">
    <ul class="nav nav-tabs" id="myTab" >
        <li tabindex="100" class="active"><a href="#BasicItemDetails" data-toggle="tab">Main Details</a></li>
        <li tabindex="102"><a href="#AssignItem" data-toggle="tab">Company Rules</a></li>
    </ul>
</div>

<div class="tab-content">
    <div class="tab-pane active" id="BasicItemDetails">
        <asp:TextBox ID="txtMainCat" TabIndex="101">
        </asp:TextBox>
    </div>
    <div class="tab-pane" id="AssignItem">
        <asp:TextBox ID="txtMainCat2" TabIndex="103">
        </asp:TextBox>                          
    </div>
</div>

厌倦了以下，似乎那个人也没有工作

$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});

// store the currently selected tab in the hash value
$("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
    var id = $(e.target).attr("href").substr(1);
    window.location.hash = id;
});

// on load of the page: switch to the currently selected tab
var hash = window.location.hash;
$('#myTab a[href="' + hash + '"]').tab('show');

Answer 1

我希望我能正确理解你的问题。在我的例子中，我有一个标签窗格，在bootstrap中有两个标签，我希望能够使用标签键和shift + tab键来改变输入字段的焦点。遗憾的是，这不适用于bootrstap选项卡窗格，因此我制作了以下代码：

function initTabSwitches()
{
    $(".tabSwitchOnTab").keydown(function (e) {
        if (e.keyCode == 9) { //tab
            if (!e.shiftKey) {
                if ($(this).attr("tabindex")) {
                    var newTabindex = parseInt($(this).attr("tabindex")) + 1;

                    focusOnInputInOtherTab(newTabindex, e);
                }
            }
            else //shift + tab
            {
                if ($(this).attr("tabindex")) {
                    var newTabindex = parseInt($(this).attr("tabindex")) - 1;

                    focusOnInputInOtherTab(newTabindex, e);
                }
            }
        }
    });
}

function focusOnInputInOtherTab(tabindex, e) {
    var newInputToFocus = $("[tabindex=" + tabindex + "]");

    var parentTab = newInputToFocus.closest(".tab-pane");

    if (!parentTab.hasClass("active")) {
        $(".tab-pane").removeClass("active");
        $("[id^=Tab_]").parents().removeClass("active");

        parentTab.addClass("active").addClass("fade").addClass("in");
        $("#Tab_" + parentTab.attr("id")).parent().addClass("active");
        newInputToFocus.focus();
        e.preventDefault();
    }
}

只需将类tabSwitchOnTab添加到第一个选项卡的最后一个输入元素和第二个选项卡的第一个元素。确保您的tabindexes正确无误。

使用bootstrap中的tabindex移入下一个选项卡面板

1 个答案: