Tab 다음 요소 선택

내용에 입력 양식 필드가있는 내 페이지에 아코디언 설정이 있습니다. 입력 필드를 순환하여 아코디언 섹션의 끝에 도달하면 탭에서 다음 아코디언 섹션의 헤더를 선택하고 싶습니다. 하지만 제출 버튼의 끝으로 넘어갑니다. 어떻게 수정해야합니까? 내가 몇 가지 코드를 공유 할 수 있습니다 :
HTMLTab 다음 요소 선택

<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>

과 자바 스크립트 : 당신이 tabIndex를 찾고있는 것처럼

$(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

그것은 소리. JSON Fiddle과 같은 서비스를 사용하는 힌트 : 예제가 없으면 어코디언 컨텍스트에서 작동하는 방식을 알기는 어렵지만 최신 브라우저에서는 HTML의 tabindex 속성을 사용하여 "tab into"기능을 추가 할 수 있습니다. (의 값을 부여하는 경우 "-1"의 요소에 탭 수없는

을하지만 포커스 프로그래밍 소자에 주어질 수있다 :
<h2 class="radioBoxInActive" tabindex="0">Product Details</h2> 
자세한 내용 this page 확인해 element.focus() 사용).
0 값이 주어지면 요소는 키보드를 통해 초점을 맞출 수 있으며 문서의 탭 이동 흐름에 포함될 수 있습니다.

0보다 큰 값은 1이 가장 중요한 우선 순위 수준을 만듭니다. 헤더는 기능을 추가 할 필요가 선택되어있을 때 일어날 특별한 것을 원한다면 물론

. $가 jQuery라고 가정하고 $(sel).focus(fn)을 사용하여 이것을 추가 할 수 있습니다.

출처

2012-09-20 15:55:23 bendman

Tab 다음 요소 선택

답변

관련 문제