関数でタブを作成する

Question

タブを動的に作成する関数を作成しようとしています。下記の機能が動作する方法です。

function create_tabs(array_var, target_element){ 
    /* array_var will be separated with comma 
    /* target_element will be appendning the final data in that elemenet 
} 

ので、私は以下のように上記の機能を使用する場合：

create_tabs('First, Second, Third', 'any_element_class'); 

次のようなデータを持つクラス「any_element_class」を持つ要素を追加する必要があります。

<ul class='tabs'> 
    <li class='tab-link current' data-tab='first'>First</li> 
    <li class='tab-link' data-tab='second'>Second</li> 
    <li class='tab-link' data-tab='third'>Third</li> 
</ul> 

<div id='first' class='tab-content current'></div> 
<div id='second' class='tab-content'></div> 
<div id='third' class='tab-content'></div> 

Answer 1

まあ少し遅れてまだ別のアプローチ：Jsfiddle

function create_tabs(array_var, target_element){ 
var array = array_var.split(", "); 
$(target_element).append("<ul class = 'tabs'></ul>"); 
$.each(array,function(i){ 
    $(target_element+ ' ul').append("<li class='tab-link' data-tab='"+array[i] +"'>"+ array[i] +"</li>") 
}); 
$.each(array,function(i){ 
    $(target_element).append("<div id='"+array[i]+"' class='tab-content'></div>"); 
}); 
}; 

Answer 2

あなたは配列として最初のパラメータを渡すことができます。

var array_var = ['first', 'second','third']; 
create_tabs(array_var, '#any_element_class'); 

その後、あなたの関数では、それをループ：

function create_tabs(array_var, element){ 
//...loop over array 
$(element).append("<li class='tab-link' data-tab='"+array_var[i]+"'>"+array_var[i]+"</li>") 
// 
}