アクセス可能なセマンティック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

<のhref = "http://blog.ginader.de/archives/2009/02/07/jQuery-Accessible-Tabs-How-to-make-tabs-REALLY-accessible.php" のrel = "nofollowをnoreferrer "> jQueryのバリアタブのヘッダを除いて、ほとんどがあり、ターゲットDIVの外側に位置しています。