主页 / 问题 / 774373
Accepted
iRumba
Asked:2020-01-23 12:51:26 +0000 UTC2020-01-23 12:51:26 +0000 UTC

引导和动态选项卡

  • 772

有这个标记

  <!-- Навигация -->
  <ul class="nav nav-pills" role="tablist" id="navtabs">
  </ul>
  <!-- Содержимое вкладок -->
  <div class="tab-content" id="tabcontent">
  </div>

有这个脚本

<script>
    $(document).ready(function() 
    {
        $('#navtabs').empty();
        $('#tabcontent').empty();
        $.each(myArray, function(i, v)
        {
            $('#navtabs').append('<li class="nav-item"><a href="#' + v + '" role="tab" data-toogle="tab" class="nav-link" id="tabh' + i + '">' + v + '</li>');
            $('#tabcontent').append('<div role="tabpanel" class="tab-pane fade" id="' + v + '">' + v + '</div>');
        });

        $('#tabh0').tab('show');
    });
</script>

也就是说，关键是标签及其内容是基于数组形成的。它们形成了，但没有按应有的方式工作。

$('#tabh0').tab('show');

打开第一个选项卡

如果在控制台中我写

$('#tabh1').tab('show');

第二个选项卡将打开。

但是在点击时它们不会改变。帮助修复。

javascript

1 个回答

  1. Best Answer

    bootstrap.js挂起单击处理程序，该处理程序在$(document).ready您之前执行 - 当您的链接尚不存在时。

    $('#navtabs a').click(function(){
  $(this).tab('show');
});

    $('#navtabs').empty();只是清除容器的内容。在这种情况下，选项卡列表。但我又在创作。动态地。为什么事件不自己挂断？

    页面加载时会发生以下情况。

    加载和执行bootstrap.js。在此“执行”期间，处理程序附加到$(document).ready.

    您的脚本加载了它的$(document).ready.

    原始 html 已加载。

    jQuery 开始调用$(document).ready.

    在 bootstrap$(document).ready中，选项卡被初始化 - 目前存在于 DOM 中，包括将点击处理程序附加到它们。

    你的被执行$(document).ready- 选项卡被删除（如果它们存在 - 连同点击处理程序）并创建新选项卡 - 没有处理程序。

    • 1

相关问题