我的tabbable窗格有问题.当我加载页面时,第一个窗格通过pageload保持为空.当我切换到第二个窗格并返回第一个窗格时.显示内容.我找不到解决方案,没有 javacript错误,但我认为这必须是一个
这是我的代码：
<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>元素.
此外,从选项卡窗格中删除淡入淡出,因为这将阻止显示.
http://www.codeply.com/go/zMxKl2Zpq2