使用函數創建選項卡

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>") 
// 
}