殘疾人專用語義的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

我設法把東西一起拿到HTML正確的結構上使用jQuery UI的標籤 - 希望有人可以借鑑這樣的東西！

$(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 Accessible Tabs幾乎就在那裏，除了頭部位於目標div之外。