使用 Bootstrap 选项卡时选项卡内容不变答案

【问题标题】：Tab content not changing while using Bootstrap tabs使用 Bootstrap 选项卡时选项卡内容不变
【发布时间】：2019-10-20 07:35:29
【问题描述】：

我有一个使用 Tabs 的带有 bootstrap v4.3.1 的 Asp.net Webforms 应用程序。单击时选项卡不显示内容。单击每个选项卡不会更改内容。我使用了较早版本的 Bootstrap，它们运行良好，但我页面上的其他控件不适用于较早版本，因此我需要尽可能使用 4.3.1。

<div class="container">
          <div class="row">
            <div class="col-xs-12 ">
              <nav>
                <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
                  <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
                  <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
                  <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
                  <a class="nav-item nav-link" id="nav-about-tab" data-toggle="tab" href="#nav-about" role="tab" aria-controls="nav-about" aria-selected="false">About</a>
                </div>
              </nav>
              <div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
                <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                  Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.
                </div>
                <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                  Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.
                </div>
                <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
                  Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.
                </div>
                <div class="tab-pane fade" id="nav-about" role="tabpanel" aria-labelledby="nav-about-tab">
                  Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.
                </div>
              </div>

            </div>
          </div>
    </div>
  </div>

【问题讨论】：

当您尝试切换选项卡时，您是否在控制台中收到任何警告或错误？顺便说一句，这可能听起来很傻，但请记住，所有选项卡中的文本都是相同的。我不确定你是否改变了它。
@NickGatzos 不，我没有收到任何警告。我知道数据是相同的 :) 我只是从 Bootsnip 链接复制了这个示例，尽管我使用的是相同的样式。谢谢

标签： jquery asp.net bootstrap-4

【解决方案1】：

单击每个选项卡似乎可以工作，但数据没有改变

是不是因为您拥有所有 4 个标签的相同的标签内容数据？？

标签对我来说很好用。

【讨论】：

David，我已将您的示例粘贴到我的应用程序中，并且得到了相同的结果。我可以单击每个选项卡，尽管选项卡标题发生了变化，但选项卡中的数据并没有改变。它显示每个选项卡的第一个选项卡结果。
你能在小提琴中复制你的问题吗？
大卫，请查看我的帖子的编辑。我找到了导致问题的脚本。我仍然不知道为什么这段脚本在早期版本的 Bootstrap 中有效，但在最新版本中无效。感谢您的帮助。
@Shane：为什么要绑定.nav-link上的点击事件？更改活动的非活动类已经由选项卡插件通过数据属性data-toggle="tab" 完成。
大卫，老版本的bootstrap由于某种原因没有绑定点击事件。它可能与页面上的另一个脚本发生冲突，但当时解决了我的问题。由于删除了该脚本，活动/非活动类工作正常，数据显示正常。这是一个非常简单的解决方案，但我花了几天时间才找到。感谢您引导我朝着正确的方向前进。

【解决方案2】：

问题不在于 Bootstrap 的版本或选项卡本身，而是另一段脚本阻止单击的选项卡变为活动状态。删除此脚本解决了该问题：

$(document).ready(function () {
$(".nav-link").click(function () {
$(".nav-link").removeClass("active");
$(this).addClass("active");
});
});

【讨论】：