如何將選項卡的內容克隆到其余選項卡

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）