Javascript 动态生成时无法使引导选项卡工作

我试图通过使用bootstrap创建一个nav选项卡，并使用从API获取的数据动态生成它

在我获得数据后，我创建了所有。在我创建dom元素的地方，我已经正确地将所有属性设置为选项卡，但是当我单击另一个导航项（它应该更改选项卡内容）时，它会将“显示”设置为第一个选项卡，活动选项卡保留在最后一个导航上，然后它就会中断并停止工作

nav有一个静态和其他动态的第一个选项卡，下面是我的函数，它将静态和动态项目附加到nav和选项卡内容：

var菜单=[
{
id:“001”，
描述：“弗鲁塔”，
plu：[
{
身份证号码：“123”，
描述：“Mela verde”，
img：“assets/img/melerosse.jpeg”，
序言：2.1，
},
{
id:“234”，
描述：“梅拉·罗萨”，
img：“assets/img/melerosse.jpeg”，
序言：2，
},
{
身份证号码：“456”，
描述：“梅拉·西西里娜”，
img：“assets/img/melerosse.jpeg”，
序言：1，
},
{
id:“111”，
描述：“梅拉特色菜”，
img：“assets/img/melerosse.jpeg”，
序言：5，
},
{
身份证号码：“222”，
描述：“梅拉·格罗萨”，
img：“assets/img/melerosse.jpeg”，
序言：3，
},
{
id:“2341”，
描述：“梅拉”，
img：“assets/img/melerosse.jpeg”，
序言：1.5，
},
],
},
{
id:“002”，
描述：“Verdura”，
plu：[
{
身份证号码：“222”，
描述：“祖卡”，
img：“assets/img/verdure.jpg”，
序言：3，
},
{
身份证号码：“222”，
描述：“波莫多罗”，
img：“assets/img/verdure.jpg”，
序言：4，
},
{
身份证号码：“222”，
描述：“Patate”，
img：“assets/img/verdure.jpg”，
序言：3.1，
},
{
身份证号码：“222”，
描述：“西葫芦”，
img：“assets/img/verdure.jpg”，
序言：1.99，
},
],
},
];
功能加载菜单（菜单）{
var nav=$（“.menu.nav”）；
var tasti=$（“.tasti.tab内容”）；
var cerca=$（“”，{class:“柔性sm填充文本sm中心导航链接”}）
.attr（“数据切换”、“避孕药”）
.attr（“href”，“cerca”）
.attr（“aria控制”、“cerca”）
.attr（“角色”、“选项卡”）
.attr（“选定的咏叹调”、“错误”）
.append（$（“”，{class:“firs search”}））；
var tabcerca=$（“”，{class:“选项卡窗格”}）
.attr（“id”、“cerca”）
.attr（“角色”、“选项卡面板”）
.附加(
$（“”，{class:“输入组mb-3”}）。追加(
$("", {
类：“窗体控件虚拟键盘”，
})
.on（“单击”，函数（）{
KioskBoard.Run（“虚拟键盘”）；
$（this.focus（）；
})
.attr（“类型”、“文本”）
.attr（“只读”、“只读”）
.attr（“数据亭板类型”、“全部”）
.attr（“数据亭板特殊字符”，“假”），
$（“”，{class:“输入组追加”}）。追加(
$（“”，{class:“btn btn主”}）
.attr（“类型”、“按钮”）
.attr（“数据传输”、“cerca”）
.文本（“Cerca”）
.on（“单击”，函数（）{}）
)
)
);
资产净值（cerca）；
附加（tabcerca）；
menu.forEach（（菜单）=>{
导航附加(
$（“”，{class:“柔性sm填充文本sm中心导航链接”}）
.attr（“数据切换”、“避孕药”）
.attr（“href”，`${menu.id}`）
.attr（“aria控件”，menu.id）
.attr（“角色”、“选项卡”）
.attr（“选定的咏叹调”、“错误”）
.text（menu.desc）
);
附加(
$（“”，{class:“选项卡窗格”}）
.attr（“id”，menu.id）
.attr（“角色”、“选项卡面板”）
.附加(
$（“”，{class:“row-row-cols-4”}）。追加(
menu.plu.map（（plu）=>{
返回$（“”，{class:“col auto”}）(
$（“”，{class:“articolo”}）
.附加(
$（“”，{class:“desc”}）.append(
$（“”）.文本（plu.desc）
)
)
.data（“prezzo”，加上prezzo）
.on（“单击”，函数（）{
阿德普罗多托({
描述：plu.desc，
qta:“1”，
prezzo:plu.prezzo，
});
})
);
})
)
)
);
});
$（`a[href$=“#${menu[0].id}”]`）.tab（“显示”）.tab（“显示”）；
$（`#${menu[0].id}`）.addClass（“显示活动”）；
}
加载菜单（菜单）
我没有发现您的代码有任何错误。但是，
id
with
number
i.e:001002..etc不起作用，所以在添加属性时，我只是附加了一些带有id的文本，例如：
tab\u yourmenuid
，它开始起作用

演示代码：


var菜单=[{
id:“001”，
描述：“弗鲁塔”，
plu：[{
身份证号码：“123”，
描述：“Mela verde”，
img：“assets/img/melerosse.jpeg”，
序言：2.1，
},
{
id:“234”，
描述：“梅拉·罗萨”，
img：“assets/img/melerosse.jpeg”，
序言：2，
},
{
身份证号码：“456”，
描述：“梅拉·西西里娜”，
img：“assets/img/melerosse.jpeg”，
序言：1，
},
{
id:“111”，
描述：“梅拉特色菜”，
img：“assets/img/melerosse.jpeg”，
序言：5，
},
{
身份证号码：“222”，
描述：“梅拉·格罗萨”，
img：“assets/img/melerosse.jpeg”，
序言：3，
},
{
id:“2341”，
描述：“梅拉”，
img：“assets/img/melerosse.jpeg”，
序言：1.5，
},
],
},
{
id:“002”，
描述：“Verdura”，
plu：[{
身份证号码：“222”，
描述：“祖卡”，
img：“assets/img/verdure.jpg”，
序言：3，
},
{
身份证号码：“222”，
描述：“波莫多罗”，
img：“资产/img/verdur