Javascript 动态嵌套选项卡创建
我正在尝试基于我的数据集实现动态嵌套选项卡。我能够成功实现父选项卡,但子选项卡有问题。 代码Javascript 动态嵌套选项卡创建,javascript,jquery,jquery-ui,tabs,Javascript,Jquery,Jquery Ui,Tabs,我正在尝试基于我的数据集实现动态嵌套选项卡。我能够成功实现父选项卡,但子选项卡有问题。 代码 $(文档).ready(函数(){ var数据1=[“财务”]、[“销售”]、[“销售3”]; var数据2=[“财务”、“财务1”]、[“财务”、“财务2”]、[“销售”、“销售1”]、[“销售”、“销售2”]、[“销售”、“销售3”]、[“销售”、“销售4”]、[“销售3”、“NOSALE”]] var stringData=“”; var dyn_div=“”; var dyn_ul=“”; va
$(文档).ready(函数(){
var数据1=[“财务”]、[“销售”]、[“销售3”];
var数据2=[“财务”、“财务1”]、[“财务”、“财务2”]、[“销售”、“销售1”]、[“销售”、“销售2”]、[“销售”、“销售3”]、[“销售”、“销售4”]、[“销售3”、“NOSALE”]]
var stringData=“”;
var dyn_div=“”;
var dyn_ul=“”;
var dyn_li=“”;
对于(变量i=0;i”
$(“.list”).append(stringData);
$(“.list li:first child”).addClass(“active”);
dyn_div=“”';
$(“.tab内容”).append(dyn_div);
}
其他的
{
李丹
$(“.p”)。附加(“”);
}
}
}
$(“.p li:第一个孩子”).addClass(“活动”);
$(“.tab content div.tab-pane:first child”).addClass(“活动中”);
})
HTML代码
<ul class="list nav nav-tabs"></ul>
<div class="tab-content"></div>
输出
我无法理解我在做什么。财务选项卡只有财务子选项卡,如Finance1,财务和销售选项卡只有销售子选项卡。有人能帮我确定我做错的问题吗。虽然这可能不是一个100%有效的解决方案,但我相信您的主要错误是行
$(“.p”)。附加(dyn\u li)代码>
因为在某一点上,有多个元素具有classp
,这将使所有元素加倍
以下是我未经验证的粗略建议:
var data1 = [["FINANCE"],["SALE"],["SALE3"]];
var data2=[["FINANCE","FINANCE1"],["FINANCE","FINANCE2"],["SALE","SALE1"],["SALE","SALE2"],["SALE","SALE3"],["SALE","SALE4"],["SALE3","NOSALE"]]
var stringData = "";
var dyn_div="";
var dyn_ul="";
var dyn_li='';
for (var i = 0; i < data1.length; i++) {
stringData = "<li><a data-toggle='tab' href=#"+data1[i]+">"+data1[i]+"</a></li>"
$(".list").append(stringData); // this element should also be addressed by an unique ID, but if there is only one element with that class, it's fine
dyn_div="<div class='tab-pane fade' id="+data1[i]+">'<ul class='p nav nav-tabs'>";
for(var j=i;j< data2.length;j++){
if(data2[j][0]==data1[i]){
dyn_li= "<li><a data-toggle='tab' href=#"+data2[j][1]+">"+data2[j][1]+"</a></li>"
$("#"+data1[i]).find('.p').first().append(dyn_li); // Here big change
dyn_div +='</ul></div>';
$(".tab-content").append(dyn_div); // this also needs to be a unique DOM element
}
}
}
$(".p li:first-child").addClass("active");
$(".tab-content div.tab-pane:first-child").addClass("active in");
var数据1=[[“财务”]、[“销售”]、[“销售3”];
var数据2=[“财务”、“财务1”]、[“财务”、“财务2”]、[“销售”、“销售1”]、[“销售”、“销售2”]、[“销售”、“销售3”]、[“销售”、“销售4”]、[“销售3”、“NOSALE”]]
var stringData=“”;
var dyn_div=“”;
var dyn_ul=“”;
var dyn_li=“”;
对于(变量i=0;i”
$(“.list”).append(stringData);//这个元素也应该由一个唯一的ID来寻址,但是如果这个类只有一个元素,就可以了
dyn_div=“”';
$(“.tab content”).append(dyn_div);//这还需要是唯一的DOM元素
}
}
}
$(“.p li:第一个孩子”).addClass(“活动”);
$(“.tab content div.tab-pane:first child”).addClass(“活动中”);
您需要格式化代码以便于阅读
您使用了错误的参数来比较data1[i]
,而不是data1[i][0]
。这也会造成错误
您需要将所有输入数据附加到dyn\u div
。不要使用$(.p).append
,它将获得追加的项而不是当前项
$(document).ready(function () {
var data1 = [
["FINANCE"],
["SALE"],
["SALE3"]
];
var data2 = [
["FINANCE", "FINANCE1"],
["FINANCE", "FINANCE2"],
["SALE", "SALE1"],
["SALE", "SALE2"],
["SALE", "SALE3"],
["SALE", "SALE4"],
["SALE3", "NOSALE"]
]
var stringData = "";
var dyn_ul = "";
var dyn_li = '';
var dyn_div = '';
for (var i = 0; i < data1.length; i++) {
stringData = $("<li><a data-toggle='tab' href=#" + data1[i][0] + ">" + data1[i][0] + "</a></li>");
$(".list").append(stringData);
$(".list li:first-child").addClass("active");
dyn_div = "<div class='tab-pane fade' id=" + data1[i][0] + "><ul class='p nav nav-tabs'>";
for (var j = 0; j < data2.length; j++) {
if (data2[j][0] === data1[i][0]) {
dyn_div += "<li><a data-toggle='tab' href=#" + data2[j][1] + ">" + data2[j][1] + "</a></li>";
}
}
dyn_div += '</ul></div>';
$(".tab-content").append(dyn_div);
}
$(".p li:first-child").addClass("active");
$(".tab-content div.tab-pane:first-child").addClass("active in");
})
$(文档).ready(函数(){
变量数据1=[
[“金融”],
[“出售”],
[“销售3”]
];
变量数据2=[
[“财务”、“财务1”],
[“财务”、“财务2”],
[“销售”、“销售1”],
[“销售”、“销售2”],
[“销售”、“销售3”],
[“销售”、“销售4”],
[“SALE3”,“NOSALE”]
]
var stringData=“”;
var dyn_ul=“”;
var dyn_li=“”;
var dyn_div='';
对于(变量i=0;i”);
$(“.list”).append(stringData);
$(“.list li:first child”).addClass(“active”);
dyn_div=“';
$(“.tab内容”).append(dyn_div);
}
$(“.p li:第一个孩子”).addClass(“活动”);
$(“.tab content div.tab-pane:first child”).addClass(“活动中”);
})
a确实可以帮助我们更好地理解这个问题。虽然一个图像可能代表一千个单词,但一个图像代表一千个图像非常感谢你的快速反应1.那很好
$(document).ready(function () {
var data1 = [
["FINANCE"],
["SALE"],
["SALE3"]
];
var data2 = [
["FINANCE", "FINANCE1"],
["FINANCE", "FINANCE2"],
["SALE", "SALE1"],
["SALE", "SALE2"],
["SALE", "SALE3"],
["SALE", "SALE4"],
["SALE3", "NOSALE"]
]
var stringData = "";
var dyn_ul = "";
var dyn_li = '';
var dyn_div = '';
for (var i = 0; i < data1.length; i++) {
stringData = $("<li><a data-toggle='tab' href=#" + data1[i][0] + ">" + data1[i][0] + "</a></li>");
$(".list").append(stringData);
$(".list li:first-child").addClass("active");
dyn_div = "<div class='tab-pane fade' id=" + data1[i][0] + "><ul class='p nav nav-tabs'>";
for (var j = 0; j < data2.length; j++) {
if (data2[j][0] === data1[i][0]) {
dyn_div += "<li><a data-toggle='tab' href=#" + data2[j][1] + ">" + data2[j][1] + "</a></li>";
}
}
dyn_div += '</ul></div>';
$(".tab-content").append(dyn_div);
}
$(".p li:first-child").addClass("active");
$(".tab-content div.tab-pane:first-child").addClass("active in");
})