jQuery 탭 만들기 현재 선택된 오류를 기준으로 선택하기

Question

두 개의 탭에 걸쳐있는 양식이 있기 때문에 선택한 웹 페이지에 오류가있는 경우 웹 응용 프로그램에서 탭을 가져 오려고 노력 중입니다. 현재로서는 오류가있는 경우 사용자는 tabs-2에서 오류 메시지를 볼 수 없으며 수정해야 할 항목을 알지 못합니다.

HTML :

<div id="tabs"> 
    <ul> 
    <li><a id="Tab-1" href="#tabs-1">Tabs 1</a></li> 
    <li><a id="Tab-2" href="#tabs-2" ">Tabs 2</a></li> 
    </ul> 
    <div style="display:block;" id="tabs-1" class="tab-content" name="content"> 
    <span>Content here</span> 
    </div> 
    <div style="display:block;" id="tabs-2" class="tab-content" name="content"> 
    <span id="ETError" class="error-template"></span> 
    <span class="error-message">Must enter at least one more</span> 
    </div> 
</div> 

JS :

<script> 
    var $j = jQuery.noConflict(); 

    $j(function() { 
    $j('#tabs').tabs(); 
    $j('#tabs > div').each(function(i) { 
     if($j(this).find('#ETError.error-message').length < 0) 
     $j('#tabs').tabs('select', i); 
    }); 
    }); 
</script> 

어떤 도움을 주시면 더 좋구요 나는 다음과 같은 코드가 있습니다. 감사!

Answer 1

오류 메시지가있는 경우 탭을 활성으로 설정하려고합니다. 그게 당신이 원한 것이라면 이것을 확인하십시오. 아니면 내가 여기에서 빠져있는 다른 것이 있는지 알려주십시오.

var $j = jQuery.noConflict(); 

    var $tabs = $j('#tabs').tabs();  

    $j("button").click(function(){ 
    var $errorSpan = $j("span").filter(function(index){   
     if($j(this).hasClass("error-message")) 
      return $j(this); 
    }); 

    var errorTabIndex = $j(".tab-content").index($errorSpan.closest(".tab-content")); 

    console.log(errorTabIndex); 

    // for jQuery < 1.10 
    $tabs.tabs({ 
     selected: errorTabIndex 
    }); 

    //for jQuery >= 1.10 
    $tabs.tabs("option", "active", errorTabIndex); 

}); 

나는 버튼을 탭에 error-div를 확인하기 위해 핸들러를 추가했습니다. 제출 양식 또는 무언가를 작성하도록 설정할 수 있습니다.

DEMO HERE

업데이트입니다 이루어집니다 무엇

, 필터는 span.error-message에 적용됩니다. 발견되면 (자), 그 범위를 돌려줍니다. 그런 다음 해당 오류 메시지가있는 탭을 찾아서 활성화 상태로 설정할 수 있습니다.