可访问语义jQuery选项卡插件

只是一个简短的问题，看看是否有人知道任何基于类似结构运行的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>

表1内容

表2内容

表3内容

我假设使用这些插件的唯一其他方法是抓取标题，删除它们，将它们添加到html顶部的列表中，然后基于此运行插件？我只是问，因为我对jQuery还很陌生，所以我不确定我会怎么做，只是想知道是否有一个插件已经存在，任何人都知道

如果没有，不用担心，我就得忙着看医生，试试看

---

干杯

我设法将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
     });



});

$（文档）.ready（函数（）{
$.fn.reverse=[].reverse；//设置reverse函数
$（“#制表符div h4”）.reverse（）.prependTo（“#制表符”）；//抓取标题并将其反转，然后将其前置到外部div
$（“#制表符h4”）。换行（“
”）；//将每个标题换行成li
$（'tabs>li'）.wrapAll（'ul class=“tabheadings”>）；//用ul包装所有li
$（'#tabs ul li h4'）。每个（函数（）{
$（this）.replaceWith（“”+$（this）.text（）+“”）；//对于每个标题，用锚替换，但保留内部
});
$（“#内容框中的制表符分区”）。每个（功能（i）{
$（this.attr（'id'，'tabs-'+（i+1））；//为每个div添加一个带有递增数字的id
});
$（#tabs ul li a'）。每个（功能（i）{
$（this.attr（'href'，'#tabs-'+（i+1））；//将锚上的href与上面的id匹配
});
});

就快到了，除了标题在目标div之外。

没有，但是祝你自己写的好运。这是一个值得的目标。