为什么页面加载时我的引导选项卡不显示？答案

【问题标题】：Why is my bootstrap tab not displayed when the page loads?为什么页面加载时我的引导选项卡不显示？
【发布时间】：2020-11-16 09:10:02
【问题描述】：

我给您写信是因为我使用了引导选项卡，但是我遇到了问题。标签在点击时效果很好，每次点击都会导致所需的内容。问题是当页面加载时，内容是空的。我必须点击才能显示一些内容，而通常默认情况下应该出现第一个选项卡（我相信这是由于 aria-selected = "true" 而完成的）

你能告诉我为什么它默认不显示吗？非常感谢！

这里是引导选项卡文档的链接： https://getbootstrap.com/docs/4.5/components/navs/#tabs

我的 HTML 代码：

                <nav>
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                          <a class="nav-link active" id="home-tab" data-toggle="tab" href="#reservation" role="tab" aria-controls="home" aria-selected="true">Ma réservation en détail</a>
                        </li>
                        <li class="nav-item" role="presentation">
                          <a class="nav-link" id="profile-tab" data-toggle="tab" href="#imprimer" role="tab" aria-controls="profile" aria-selected="false">Imprimer mes documents de voyage</a>
                        </li>
                        <li class="nav-item" role="presentation">
                          <a class="nav-link" id="contact-tab" data-toggle="tab" href="#payer" role="tab" aria-controls="contact" aria-selected="false">Payer le solde de mon séjour</a>
                        </li>
                    </ul>
                </nav>

<div class="tab-pane fade show active" id="reservation" role="tabpanel" aria-labelledby="home-tab">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

<div class="tab-pane fade" id="imprimer" role="tabpanel" aria-labelledby="profile-tab">Lorem ipsum dolor</div>

<div class="tab-pane fade" id="payer" role="tabpanel" aria-labelledby="contact-tab">Lorem ipsum dolor sit amet.</div>

【问题讨论】：

我刚刚在live demo 中复制了您的代码，一切似乎都运行良好。除了使用 Bootstrap，你还写过其他样式吗？
非常感谢马特！事实上，我有一个完整的代码。至少感谢你，我知道这是因为我的 CSS 我要探索这条赛道谢谢！
我删除了所有的css，但它不起作用。所以它必须来自我的html结构。我一直在寻找；）再次感谢！

标签： html css bootstrap-4 tabs

【解决方案1】：

再次感谢帮助过我的人。我终于发现问题出在哪里了。我在我的网站上安装了最新版本的 Bootstrap (Bootrstrap 5)，并且文档适用于 Bootstrap 3 ...谢谢！

【讨论】：

【解决方案2】：

我认为你错过了课程标签内容

<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

【讨论】：

谢谢萨梅拉。确实，我忘了把它放在我的帖子里抱歉......但它是存在的。我已经尝试了所有我不明白的问题。但我不认为你能帮助我......它必须来自我网站上的其他地方。
我相信我找到了问题所在。当教程在 Bootstrap 3 上时，我的网站使用最新版本的 Bootstrap ...再次感谢