使用函数创建选项卡

Creating Tabs with a function

本文关键字：选项 创建 函数      更新时间：2023-09-26

我正在尝试创建一个动态创建选项卡的函数。下面是函数的工作原理:

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');

if应该在类为"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>

有点晚了，但还是有另一种方法: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>");
});
};

您可以将第一个参数传递为数组:

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>")
//
}
相关文章：