【发布时间】：2021-05-24 21:55:58
【问题描述】：
我正在尝试使用引导程序制作导航选项卡，并使用从 API 获取的数据动态生成它。
在我获得数据后，我在创建 dom 元素的地方创建了所有 .appends，我已将所有属性正确设置为选项卡，但是当我单击另一个应该更改选项卡内容的导航项时，它会将“SHOW”设置为第一个选项卡和活动保持在最后一个导航，然后它只是中断并停止工作......
导航有一个静态和其他动态的第一个选项卡，这是我的功能，它将静态和动态项目附加到导航和选项卡内容：
var menu = [
{
id: "001",
desc: "Frutta",
plu: [
{
id: "123",
desc: "Mela verde",
img: "assets/img/melerosse.jpeg",
prezzo: 2.1,
},
{
id: "234",
desc: "Mela Rossa",
img: "assets/img/melerosse.jpeg",
prezzo: 2,
},
{
id: "456",
desc: "Mela Siciliana",
img: "assets/img/melerosse.jpeg",
prezzo: 1,
},
{
id: "111",
desc: "Mela Speciale",
img: "assets/img/melerosse.jpeg",
prezzo: 5,
},
{
id: "222",
desc: "Mela Grossa",
img: "assets/img/melerosse.jpeg",
prezzo: 3,
},
{
id: "2341",
desc: "Mela",
img: "assets/img/melerosse.jpeg",
prezzo: 1.5,
},
],
},
{
id: "002",
desc: "Verdura",
plu: [
{
id: "222",
desc: "Zucca",
img: "assets/img/verdure.jpg",
prezzo: 3,
},
{
id: "222",
desc: "Pomodoro",
img: "assets/img/verdure.jpg",
prezzo: 4,
},
{
id: "222",
desc: "Patate",
img: "assets/img/verdure.jpg",
prezzo: 3.1,
},
{
id: "222",
desc: "Zucchina",
img: "assets/img/verdure.jpg",
prezzo: 1.99,
},
],
},
];
function loadMenu(menu) {
var nav = $(".menu .nav");
var tasti = $(".tasti .tab-content");
var cerca = $("<a>", { class: "flex-sm-fill text-sm-center nav-link" })
.attr("data-toggle", "pill")
.attr("href", "#cerca")
.attr("aria-controls", "cerca")
.attr("role", "tab")
.attr("aria-selected", "false")
.append($("<i>", { class: "fi-rs-search" }));
var tabcerca = $("<div>", { class: "tab-pane" })
.attr("id", "cerca")
.attr("role", "tabpanel")
.append(
$("<div>", { class: "input-group mb-3" }).append(
$("<input>", {
class: "form-control virtual-keyboard",
})
.on("click", function () {
KioskBoard.Run(".virtual-keyboard");
$(this).focus();
})
.attr("type", "text")
.attr("readonly", "readonly")
.attr("data-kioskboard-type", "all")
.attr("data-kioskboard-specialcharacters", "false"),
$("<div>", { class: "input-group-append" }).append(
$("<button>", { class: "btn btn-primary" })
.attr("type", "button")
.attr("data-trans", "cerca")
.text("Cerca")
.on("click", function () {})
)
)
);
nav.append(cerca);
tasti.append(tabcerca);
menu.forEach((menu) => {
nav.append(
$("<a>", { class: "flex-sm-fill text-sm-center nav-link" })
.attr("data-toggle", "pill")
.attr("href", `#${menu.id}`)
.attr("aria-controls", menu.id)
.attr("role", "tab")
.attr("aria-selected", "false")
.text(menu.desc)
);
tasti.append(
$("<div>", { class: "tab-pane" })
.attr("id", menu.id)
.attr("role", "tabpanel")
.append(
$("<div>", { class: "row row-cols-4" }).append(
menu.plu.map((plu) => {
return $("<div>", { class: "col-auto" }).append(
$("<div>", { class: "articolo" })
.append(
$("<img>").attr("src", plu.img),
$("<div>", { class: "desc" }).append(
$("<h4>").text(plu.desc)
)
)
.data("prezzo", plu.prezzo)
.on("click", function () {
addProdotto({
desc: plu.desc,
qta: "1",
prezzo: plu.prezzo,
});
})
);
})
)
)
);
});
$(`a[href$="#${menu[0].id}"]`).tab("show").tab("show");
$(`#${menu[0].id}`).addClass("show active");
}
loadMenu(menu);<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<div class="menu">
<nav class="nav-scroller mb-2">
<div
class="nav nav-pills flex-column flex-sm-row"
role="tablist"
></div>
</nav>
</div>
<div class="tasti">
<div class="tab-content"></div>
</div>【问题讨论】：
-
它对我来说工作正常。你添加了 popper.js 吗？
-
@Swati 我正在使用包含它的 bootstrap.bundle，顺便说一下，如果我将导航选项卡设为静态，它可以正常工作..
标签： javascript html jquery twitter-bootstrap bootstrap-4