我有可选项卡 Pane 的问题。当我加载页面时，第一个 Pane 通过页面加载保持为空。当我切换到第二个 Pane 并返回到第一个时。显示内容。我找不到解决方案，没有 javacript 错误，但我认为这一定是 javasript 问题。我正在使用 bootstrap 4 alpha 6 和 jquery3.1.1。还有 wow.js、jquery.easing 和 Tether
这是我的代码:
<div class="tabbable-panes">
<ul id="clothing-nav" class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Button Groups</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#hats" role="tab" id="hats-tab" data-toggle="tab" aria-controls="hats">Button Toolbar</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Button Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#dropdown-combine" role="tab" id="dropdown-combine-tab" data-toggle="tab" aria-controls="dropdownCombine">Combining</a>
<a class="dropdown-item" href="#dropdown-split" role="tab" id="dropdown-split-tab" data-toggle="tab" aria-controls="dropdownSplit">Split</a>
</div>
</li>
</ul>
</div>
<!-- Content Panel -->
<div id="clothing-nav-content" class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledby="home-tab">
<p>
<h5><i class="fa fa-hashtag" aria-hidden="true" ></i> Button Groups Horizontal</h5>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary btn-sm">HTML5</button>
<button type="button" class="btn btn-primary btn-sm">CSS3</button>
<button type="button" class="btn btn-primary btn-sm">SCSS</button>
</div>
</p>
<p>
<h5><i class="fa fa-hashtag" aria-hidden="true" ></i> Button Groups Vertical</h5>
<div class="btn-group-vertical" role="group">
<button type="button" class="btn btn-primary btn-sm">HTML5</button>
<button type="button" class="btn btn-primary btn-sm">CSS3</button>
<button type="button" class="btn btn-primary btn-sm">SCSS</button>
</div>
</p>
<p>just add <code>vertical</code>to the btn-group class <code>class="btn-group-vertical"</code></p>
</div>
<div role="tabpanel" class="tab-pane fade" id="hats" aria-labelledby="hats-tab">
<p>
<h5><i class="fa fa-hashtag" aria-hidden="true"></i> Button Toolbar</h5>
<p>you can combine btn-groups by nest theme into one single - toolbar</p>
<table class="table table-sm table-responsive">
<thead>
<tr>
<th>Button Toolbar</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary btn-sm">One</button>
<button type="button" class="btn btn-primary btn-sm">One</button>
<button type="button" class="btn btn-primary btn-sm">One</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary btn-sm">Two</button>
<button type="button" class="btn btn-primary btn-sm">Two</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="dropdown-combine" aria-labelledby="dropdown-combine-tab">
<p>
<h5><i class="fa fa-hashtag" aria-hidden="true"></i> Button Groups combined with Dropdown</h5>
<p>you can nest dropdowns into button groups by using a seperate btn-group inside.</p>
<p>
<table class="table table-sm table-responsive">
<thead>
<tr>
<th>dropdown with btn-groups</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary btn-sm">Home</button>
<button type="button" class="btn btn-primary btn-sm">Service</button>
<div class="btn-group" role="group">
<button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About
</button>
<div class="dropdown-menu" aria-labelledby="about-us">
<a class="dropdown-item" href="#">Portfolio</a>
<a class="dropdown-item" href="#">Impressum</a>
<a class="dropdown-item" href="#">Contact</a>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="dropdown-split" aria-labelledby="dropdown-split-tab">
<p>
<h5><i class="fa fa-hashtag" aria-hidden="true"></i> Split Dropdown's</h5>
<p>With button groups you can creat a split dropdown-menu</p>
<p>
<table class="table table-sm table-responsive">
<thead>
<tr>
<th>Split Dopdown's</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="btn-group">
<button type="button" class="btn btn-primary btn-sm">About</button>
<button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Portfolio</a>
<a class="dropdown-item" href="#">Impressum</a>
<a class="dropdown-item" href="#">Contact</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</p>
</div>
</div>最佳答案
不要使用 h5和/或 <div>内<p>元素。
另外，删除 fade从选项卡 Pane 中，因为这将阻止显示。
http://www.codeply.com/go/zMxKl2Zpq2
关于bootstrap-4 - Bootstrap 4 选项卡 - 页面加载时未显示第一个 Pane ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42883584/