접근 가능한 시맨틱 jQuery 탭 플러그인

Question

유사한 구조를 기반으로 실행되는 jQuery 탭 플러그인을 알고 있는지 확인하는 빠른 질문은 다음과 같습니다.

<div class="tabs">
    <div>
        <h4>Tab one</h4>
        <p>Lorem Ipsum</p>
    </div>

    <div>
        <h4>Tab two</h4>
        <p>Lorem Ipsum</p>
    </div>
</div>

플러그인이 H4S에서 탭의 제목을 가져 오는 곳은 어디입니까? 구조를 사용하는 플러그인 만 찾을 수 있습니다.

<div id="tabs">
   <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
   </ul>
   <div id="tabs-1">
      <p>Tab 1 content</p>
   </div>
   <div id="tabs-2">
      <p>Tab 2 content</p>
   </div>
   <div id="tabs-3">
      <p>Tab 3 content</p>
   </div>
</div>

이 플러그인을 사용하는 유일한 다른 방법은 제목을 잡고 제거하고 HTML 상단의 목록에 추가 한 다음 플러그인을 실행하는 것입니다. 나는 단지 jQuery에 익숙하지 않은 것처럼 묻습니다. 그래서 나는 그것에 대해 어떻게 갈 것인지 확신하지 못하고 누군가가 이미 알고있는 플러그인이 있는지 궁금해했습니다.

그렇지 않다면 걱정하지 않으면 문서로 바쁘게되어야합니다!

건배

Answer 1

나는 jQuery UI 탭을 사용하기 위해 HTML을 올바른 구조로 가져 오기 위해 무언가를 모았습니다. 누군가 누군가 이것으로부터 무언가를 배울 수 있기를 바랍니다!

$(document).ready(function() {
     $.fn.reverse = [].reverse; //Set the reverse function
    $('#tabs div h4').reverse().prependTo('#tabs'); //Grab the headings and reverse them, then prepend to outer div
    $('#tabs h4').wrap('<li></li>'); //wrap each heading in an li
    $('#tabs > li').wrapAll('<ul class="tabheadings"></ul>'); //wrap all li's in ul
    $('#tabs ul li h4').each(function(){
      $(this).replaceWith('<a>' + $(this).text() + '</a>'); //for each heading replace with an anchor but keep innards
   });
    $('#tabs div.in_content_box').each(function(i){
       $( this ).attr('id', 'tabs-' + (i+1)); //for each div add an id with an incremental number
    });
    $('#tabs ul li a').each(function(i){
        $( this ).attr('href', '#tabs-' + (i+1)); //match the href on the anchor with the id above
     });



});

Answer 2

jQuery 액세스 가능한 탭 헤더가 대상 div 외부에 앉아있는 것을 제외하고는 거의 존재합니다.