Bootstrap 4 导航选项卡内容在初始页面加载时不显示内容

Question

在初始页面加载时，选项卡显示，但所选选项卡的内容不显示。

如果我单击“链接”选项卡并返回“发布”选项卡，它就会显示出来。

<div class="container">
    <div class="card text-center">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs" id="tabs">
                <li class="nav-item">
                    <a class="active nav-link" href="#post" data-toggle="tab">Post</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#link" data-toggle="tab">Link</a>
                </li>
            </ul>
        </div>
        <div class="card-body">
            <div class="tab-content">
                <div class="tab-pane" id="post">post</div>
                <div class="tab-pane" id="link">link</div>
            </div>
        </div>
    </div>
</div>

在页面加载时，它看起来像这样（带有tab-pane类的 div 尚未显示）：

我的控制台中没有错误，并且加载了 bootstrap JS 文件。 周围有一些类似的问题，但解决方案对我不起作用。

我需要添加什么才能在页面加载时显示选项卡窗格？

Answer 1

看一下这个

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="card text-center"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs" id="tabs"> <li class="nav-item"> <a class="active nav-link active" href="#post" data-toggle="tab">Post</a> </li> <li class="nav-item"> <a class="nav-link" href="#link" data-toggle="tab">Link</a> </li> </ul> </div> <div class="card-body"> <div class="tab-content"> <div class="tab-pane active" id="post">post</div> <div class="tab-pane" id="link">link</div> </div> </div> </div> </div>

Answer 2

您的问题的根本原因是淡入淡出类。 做得好 ！ 删除它是解决方案。