0

ページにアコーディオンを設定し、内容に入力フォーム フィールドがあります。入力フィールドを循環し、アコーディオン セクションの最後に到達したら、タブで次のアコーディオン セクションのヘッダーを選択します。しかし、それは送信ボタンの最後に行くだけです。どうすれば修正できますか？いくつかのコードを共有させてください:
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");
    });

});
4

1 に答える 1

3

TabIndex を探しているようです。例がなければ、アコーディオンのコンテキストでどのように機能するかを伝えるのは難しいですが (ヒント: JS Fiddle のようなサービスを使用してください)、最新のブラウザーでは、HTML の tabindex プロパティを使用して「タブに」機能を追加できます。

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

詳細については、次のページをご覧ください。

  • 「-1」の値を指定すると、要素にタブを付けることはできませんが、プログラムで要素にフォーカスを与えることができます (element.focus() を使用)。
  • 値が 0 の場合、要素はキーボードを介してフォーカスでき、ドキュメントのタブ フローに分類されます。
  • 0 より大きい値は、1 が最も重要な優先度レベルを作成します。

もちろん、ヘッダーが選択されたときに何か特別なことをしたい場合は、機能を追加する必要があります。$ が jQuery であると仮定すると、 $(sel).focus(fn)を使用してこれを追加できます。

于 2012-09-20T15:55:23.187 に答える