選項卡選擇下一個元素

我在我的頁面上有一個手風琴設置，內容中有輸入表單域。當我循環輸入字段併到達手風琴部分的結尾時，我希望選項卡選擇下一節手風琴節的標題。但它只是到提交按鈕結束。我如何解決它？讓我分享一些代碼：
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"); 
    }); 

});

來源

2012-09-20 amit

這聽起來像你正在尋找的TabIndex。如果沒有示例（提示：使用JS Fiddle之類的服務），很難說出它如何在您的手風琴上下文中運行，但在現代瀏覽器中，您可以使用HTML的tabindex屬性將「製表符」添加到功能中。

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

有關詳細信息檢查出this page：

如果給定的值「-1」，該元件不能被選項卡式到焦點，但可以通過編程給予元件（使用element.focus（））。

如果給定的值爲0，則該元素可以通過鍵盤進行聚焦並落入文檔的Tab鍵流中。

大於0的值會創建一個優先級別，其中1是最重要的。

當然，如果你當標題被選中，您將需要添加的功能要什麼特別的事情發生。假設你的$是jQuery，你可以使用$(sel).focus(fn)來添加它。

來源

2012-09-20 15:55:23 bendman

選項卡選擇下一個元素

回答

相關問題