选项卡选择下一个元素

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

选项卡选择下一个元素

回答

相关问题