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

Question

我正在尝试使用引导程序来制作导航标签，并通过API获取的数据动态地生成它。

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

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

​

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>

​

Answer 1

我没发现你的代码有什么问题。但是，带有id的numbers i.e : 001,002..etc不起作用，所以当添加属性(即：tab_yourmenuid )时，我只是附加一些带有ids的文本，然后它就开始工作了。

演示代码

​

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", `#tab_${menu.id}`) //added text
      .attr("aria-controls", "tab_" + menu.id) //added text
      .attr("role", "tab")
      .attr("aria-selected", "false")
      .text(menu.desc)
    );

    tasti.append(
      $("<div>", {
        class: "tab-pane"
      })
      .attr("id", "tab_" + menu.id) //added text
      .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$="#tab_${menu[0].id}"]`).tab("show").tab("show");
  $(`#tab_${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>

​