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

Question

I have a tab component from Jquery with severals tabs. In principals all tabs have the same structure and components only the content in each component change. I'm looking for a way how I can just copy or "clone" the components and structure of one tab in the rest. For example I have 5 tabs and all 5 will have the same structure like this

<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>

I don't want to copy and paste the same code for the rest of the tabs, I think is not the best solution and should exist a way to optimize this.

Answer 1

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

U can try running this when document is ready. One way to do it.

Answer 2

In this case don't use multiple DIVs for each tab. Let the structure be one, perhaps use multiple tabs using ULs (as is in your code snippet).

Just reload the content using JavaScript while navigating between tabs.

-Nith

Answer 3

Try:

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

Be careful with your ID's. In each tab you have the same ID's. (eg. id_maschine)