0

我想做一个简单的 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>

但是我不确定如何编写这个自定义代码来实现这一点，有人可以帮我这样做吗？

非常感谢

4

1 回答 1

0

如果您修改了从创建时使用的任何编辑器生成的 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();

DEMO

于 2013-04-28T15:29:14.383 回答