JQuery UI - 克隆选项卡 - 不切换选项卡

Posted

技术标签:

【中文标题】JQuery UI - 克隆选项卡 - 不切换选项卡【英文标题】:JQuery UI - Cloned Tabs - not switching tabs 【发布时间】:2019-10-31 19:17:41 【问题描述】:

我正在克隆一个 JQuery UI 选项卡元素。正在从克隆的实例中正常创建选项卡,但我无法更改实例上的选项卡。原来的 tabs 元素可以正常工作。

$("#tabs").tabs();

$('#button').click(function() 
  $('#tabs').clone().appendTo('body');
);
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id='tabs'>
  <ul>
    <li><a href="#tab1">Tab 1</a>
    </li>
    <li><a href="#tab2">Tab 2</a>
    </li>
    <li><a href="#tab3">Tab 3</a>
    </li>
  </ul>
  <div id="tab1">aa</div>
  <div id="tab2">bb</div>
  <div id="tab3">cc</div>
</div>
<button id='button'>Create Tabs</button>

fiddle

【问题讨论】:

【参考方案1】:

您需要重新初始化克隆的标签页

$("#tabs").tabs();

$('#button').click(function() 
  $('#tabs').clone().appendTo('body').tabs();
);
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id='tabs'>
  <ul>
    <li><a href="#tab1">Tab 1</a>
    </li>
    <li><a href="#tab2">Tab 2</a>
    </li>
    <li><a href="#tab3">Tab 3</a>
    </li>
  </ul>
  <div id="tab1">aa</div>
  <div id="tab2">bb</div>
  <div id="tab3">cc</div>
</div>
<button id='button'>Create Tabs</button>

我也会替换新标签的id,以避免两个元素具有相同的id

【讨论】:

以上是关于JQuery UI - 克隆选项卡 - 不切换选项卡的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 jQuery 切换选项卡,而不关闭相邻的选项卡。

不推荐使用 JQuery Ui 选项卡分页

单击/激活 jQuery UI 选项卡时触发函数?

jQuery UI 选项卡 - 如何获取当前选定的选项卡索引

无法在Jquery UI垂直选项卡中执行验证

jQuery UI选项卡 - 如何在悬停上选择选项卡