如何将选项卡的内容克隆到其余选项卡

Question

我从Jquery有几个选项卡的选项卡组件。 原则上，所有选项卡都具有相同的结构和组件，仅每个组件中的内容都会更改。 我正在寻找一种方法来复制或“克隆”其余选项卡的组件和结构。 例如，我有5个标签，所有5个标签都将具有相同的结构

<div id="tabs">
  <ul id="tab">
    <li><a href="#tabs-1"></a></li>
    <li><a href="#tabs-2"></a></li>
    <li><a href="#tabs-3"></a></li>
    <li><a href="#tabs-4"></a></li>
    <li><a href="#tabs-5"></a></li> 
  </ul>

  <div id="tabs-1">
    <div class="row">
        <div class="col-xs-2">
            <label>Maschine:</label>
            <select id="slt-maschine" class="form-control">
                <option></option>
            </select>
        </div>
        <div class="col-xs-1">
            <label>Id:</label>
            <label id="id_maschine"></label>
        </div>
   </div>
 </div>
</div>

我不想为其余选项卡复制并粘贴相同的代码，我认为这不是最好的解决方案，应该存在一种优化方法。

Answer 1

var tabhtml= $('#tabs-1').html();
for(i=2;i<=5;i++){
  $('#tabs').append('<div id="tabs-'+i+'">'+tabhtml+'</div>');
}

您可以在准备好文档后尝试运行此文件。 一种方法。

Answer 2

在这种情况下，请勿为每个标签使用多个DIV。 让结构成为一体，或者使用UL使用多个选项卡（如代码段所示）。

在标签之间导航时，只需使用JavaScript重新加载内容即可。

-没有

Answer 3

尝试：

$('#tabs-x').html($('#tabs-1').html());

请注意您的身份证。 在每个选项卡中，您具有相同的ID。 （例如id_maschine）