Question

我的页面上有手风琴设置，内容中包含输入表单字段。当我循环输入字段并到达手风琴部分的结尾时，我希望选项卡选择下一个手风琴部分的标题。但它只是结束了提交按钮。我如何解决它？让我分享一些代码：
的 HTML

    <input type="radio" class="radioBoxHide " name="byemail" id="byemail" value="byemail" data-panel="pageDetails" />
<h2 class="radioBoxInActive radioBoxActive">Page Details</h2>

<div class="tab-content" id="pageDetails">
    <form name="pageDetails" action="" method="">
            <div class="moduleRow" >
                <label class="reqd" for="prCategory">Primary Category</label>
                <select id="prCategory">
                    <option value="value1">Value 1</option>
                    <option value="value2">Value 2</option>
                </select>
            </div>
     </form>
</div>

<input type="radio" class="radioBoxHide " name="byemail" id="byemail" value="byemail" data-panel="productDetails" />
<h2 class="radioBoxInActive">Product Details</h2>
<div class="tab-content" id="productDetails">
    <form name="productDetails" action="" method="">
            <div class="moduleRow" >
                <label for="displayName">Display Name</label>
                <input type="text" name="displayName" id="displayName" value="" />
            </div>
            <div class="moduleRow" >
                <label for="shortTitle">Short Title</label>
                <input type="text" name="shortTitle" id="shortTitle" value="" />
            </div>
     </form>
</div>

和 javascript ：

$(function () {
    var app = this;
    $("#siteLabel, #pageLabel, #articlelabel, #productlabel").hide();

    $(".tabs-control label").click(function () {
        input = $(this).prev("span, input");
        $(".selected", app.element).removeClass("selected").hide();
        $(".radioBoxActive", app.element).removeClass("radioBoxActive");
        $("#" + input.attr("data-panel")).show().addClass("selected");
        $(this).addClass("radioBoxActive");
    });

    $("select").change(function () {
        var str = "";
        $("select option:selected").each(function () {
            $(".selecteddd", app.element).removeClass("selecteddd").hide();
            str += $(this).attr("data-panel") + " ";
            $("#" + $(this).attr("data-panel")).show().addClass("selecteddd");
        });
    }).change();

    if ($(".tabs-control").hasClass('newProduct')) {
        $("#pageDetails, #productDetails, #imageFields, #addInfo, #nutriInfo").hide();
    }

    var selected = $(".radioBoxActive");
    input = selected.prev("input");
    $("#" + input.attr("data-panel")).show().addClass("selected");

    $("h2.radioBoxInActive").click(function () {
        input = $(this).prev("span, input");
        $(".selected", app.element).removeClass("selected").slideUp();
        $(".radioBoxActive", app.element).removeClass("radioBoxActive");
        $("#" + input.attr("data-panel")).slideDown().addClass("selected");
        $(this).addClass("radioBoxActive");
    });

});

Answer 1

听起来你正在寻找TabIndex。如果没有示例，很难说它如何在您的手风琴的上下文中工作（提示：使用像JS Fiddle这样的服务），但在现代浏览器中，您可以使用HTML的tabindex属性添加“tab into”功能。

<h2 class="radioBoxInActive" tabindex="0">Product Details</h2>

有关详细信息，请查看this page：

如果给定值为“-1”，则元素无法选项卡，但可以通过编程方式将焦点赋予元素（使用element.focus（））。

如果给定的值为0，则可以通过键盘对元素进行聚焦，并将其放入文档的标签流中。

大于0的值会创建一个优先级，其中1是最重要的。

当然，如果您在选择标题时想要发生任何特殊情况，则需要添加功能。假设你的$是jQuery，你可以使用$(sel).focus(fn)添加它。

标签选择下一个元素

1 个答案: