带有特定标记的jQuery简单选项卡

我想制作一个简单的jQuery选项卡，这将进入cms，并使用一个编辑器进行标记，因此我需要以下标记，以便于最终用户添加它们

<h3>
    Title here</h3>
<h4>
    Subtitle here</h4>
<ul>
    <li>
        Menu option 1</li>
    <li>
        Menu option 2</li>
    <li>
        Menu option 3</li>
    <li>
        Menu option 4</li>
</ul>
<div>
    <p>
        Tab option 1 content</p>
</div>
<div>
    <p>
        Tab option 2 content</p>
</div>
<div>
    <p>
        Tab option 3 content</p>
</div>
<div>
    <p>
        Tab option 4 content</p>
</div>

标题在这里
这里是副标题


菜单选项1

菜单选项2

菜单选项3

菜单选项4


选项卡选项1内容


选项卡选项2内容


选项卡选项3内容


选项卡选项4内容

然而，我不知道如何编写这个自定义代码来实现这一点，谁能帮我一把吗

---

非常感谢

如果您修改了从创建时使用的任何编辑器生成的html，那么它会更简单。将类添加到标题中，将选项卡包装到主div中，以及创建选项卡插件想要的标记，这将节省额外的代码以再次更改它

然而，这里有一个解决方案，它利用您拥有的并创建jQueryUI标签标记：

var $outputContainer=$('body');

/* get basic markup from editor source*/
var editorHTML=$('#editorContent').html();

var $content=$(editorHTML);
var $headings=$content.filter(':lt(2)');

/* create a tabs  wrapper*/
var $tabs=$('<div id="tabs">').append($content.filter('h4').nextUntil() );
/* add links to tabs li's */
$tabs.children('ul').find('li').each(function( tabIdx){
    $(this).html(function(i, html){
        return '<a href="#tabs-'+tabIdx+'">'+html+'</a>';
    });
})
/* add ID to content DIV's*/
$tabs.children('div').each(function( i){
     this.id= 'tabs-'+i;
});
/* insert modifyied html in DOM*/
$outputContainer.html( $headings).append( $tabs);
/* initilaize tabs*/
$tabs.tabs();

var$outputContainer=$（'body'）；
/*从编辑器源获取基本标记*/
var editorHTML=$（'#editorContent'）.html（）；
var$content=$（editorHTML）；
var$headers=$content.filter（':lt（2）'）；
/*创建选项卡包装器*/
var$tabs=$（''）.append（$content.filter（'h4'）.nextUntil（））；
/*添加到li的选项卡的链接*/
$tabs.children（'ul'）。find（'li'）。每个（函数（tabIdx）{
$（this）.html（函数（i，html）{
返回“”；
});
})
/*将ID添加到内容分区*/
$tabs.children（'div'）。每个（函数（i）{
this.id='tabs-'+i；
});
/*在DOM中插入修改的html*/
$outputContainer.html（$headers）.append（$tabs）；
/*初始化选项卡*/
$tabs.tabs（）；

---

不清楚您指的是什么自定义代码……请更详细地解释问题。我想使用以下提供的标记并制作为选项卡，ul列表是标签，而’s是每个标签的内容-想在jquerynumerous tabs插件中做些什么可用..如果你能更具体地了解并明确你的问题，那会有所帮助。虽然问题很多，但我需要在上面写一篇使用这种标记格式的文章，这是我想要避免的因为我不知道如何将自定义类添加到ckeditor中的样式下拉列表中-它已经有了一个空div和do列表，您已经看到了哦对不起，这会将我想要的标记重写到tabs标记中吗？