JQuery

Question

我正在克隆 JQuery UI 带有嵌套 UI 选项卡的对话框。我需要隐藏原始的 Tabs 元素（或将它们放在屏幕外），但仍然能够克隆和显示克隆的 Tabs。有什么想法吗？

<div class="dialog">
                <div class='tabs'>
                    <ul>
                        <li data-type="presentations"><a href="#presentations">Presentations</a>
                        </li>
                        <li data-type="outcomes"><a href="#outcomes">Learning Outcomes</a>
                        </li>
                        <li data-type="conditions"><a href="#conditions">Core Conditions</a>
                        </li>
                    </ul>
                    <div id="presentations"></div>
                    <div id="outcomes"></div>
                    <div id="conditions"></div>
                </div>
            </div>
      <button id='button'>Create Tabs</button>

和

//$('.tabs').hide();

$('#button').click(function() {
  $('.dialog').clone().appendTo('body').removeClass( 'dialog' ).tabs();
});

Fiddle

如果这不可行，那么我想退而求其次是动态创建选项卡。

Answer 1

将 display: none 添加到您的 .css 文件中的 class dialog：

.dialog {
    display: none;
}

JQuery - 克隆标签但隐藏原始标签？

JQuery - Clone Tabs but keep original hidden?

jquery-ui