Bootstrap 4 个导航药丸不起作用
Bootstrap 4 nav pills are not working
<!-- Bootstrap pills -->
<ul class="nav nav-pills">
<li class="active">
<a data-toggle="pill" href="driver-details-tab">Driver Details</a>
</li>
<li>
<a data-toggle="pill" href="#erer">Register Driver</a>
</li>
</ul>
<div class="tab-content">
<div class="container-fluid drivers-main tab-pane active" id="driver-details-tab" role="tabpanel">
<div class="tab-pane" id="register-driver-tab" role="tabpanel">
asdsdd
</div>
<div class="container-fluid drivers-main tab-pane active" id="erer" role="tabpanel">
<div class="tab-pane" id="register-driver-tab" role="tabpanel">
ffffffffffffffffffffffffffff
</div>
</div>
您好,我在 bootstrap 中使用 nav-pills 但由于某些原因它无法正常工作,请查看上面的代码,我没有在 bootstrap 中包含以上fiddle
药片用这样的东西:
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#driver-details-tab">Driver Details</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#erer">Register Driver</a>
</li>
</ul>
请注意我添加的 类。
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#driver-details-tab">Driver Details</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#erer">Register Driver</a>
</li>
</ul>
<div class="tab-content">
<div class="container-fluid drivers-main tab-pane active" id="driver-details-tab" role="tabpanel">
asdsdd
</div>
<div class="container-fluid drivers-main tab-pane active" id="erer" role="tabpanel"> fff</div>
</div>
检查一下!不要忘记在 href 中的 id 名称之前包含 # 符号!
Bootstrap 3 或 4
一旦 CSS 不起作用,请使用 JavaScript 导航。 (如果只有 CSS 不起作用)
<!-- Bootstrap pills -->
<ul class="nav flex-column" id="v-pills-tab">
<li class="active">
<a data-toggle="pill" href="driver-details-tab">Driver Details</a>
</li>
<li>
<a data-toggle="pill" href="#erer">Register Driver</a>
</li>
</ul>
<div class="tab-content">
<div class="container-fluid drivers-main tab-pane active" id="driver-details-tab" role="tabpanel">
<div class="tab-pane" id="register-driver-tab" role="tabpanel">
asdsdd
</div>
<div class="container-fluid drivers-main tab-pane active" id="erer" role="tabpanel">
<div class="tab-pane" id="register-driver-tab" role="tabpanel">
ffffffffffffffffffffffffffff
</div>
</div>
<script>
$('#v-pills-tab a').on('click', function (e) {
e.preventDefault();
$(this).tab('show')
})
</script>
<!-- Bootstrap pills -->
<ul class="nav nav-pills">
<li class="active">
<a data-toggle="pill" href="driver-details-tab">Driver Details</a>
</li>
<li>
<a data-toggle="pill" href="#erer">Register Driver</a>
</li>
</ul>
<div class="tab-content">
<div class="container-fluid drivers-main tab-pane active" id="driver-details-tab" role="tabpanel">
<div class="tab-pane" id="register-driver-tab" role="tabpanel">
asdsdd
</div>
<div class="container-fluid drivers-main tab-pane active" id="erer" role="tabpanel">
<div class="tab-pane" id="register-driver-tab" role="tabpanel">
ffffffffffffffffffffffffffff
</div>
</div>
您好,我在 bootstrap 中使用 nav-pills 但由于某些原因它无法正常工作,请查看上面的代码,我没有在 bootstrap 中包含以上fiddle
药片用这样的东西:
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#driver-details-tab">Driver Details</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#erer">Register Driver</a>
</li>
</ul>
请注意我添加的 类。
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#driver-details-tab">Driver Details</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#erer">Register Driver</a>
</li>
</ul>
<div class="tab-content">
<div class="container-fluid drivers-main tab-pane active" id="driver-details-tab" role="tabpanel">
asdsdd
</div>
<div class="container-fluid drivers-main tab-pane active" id="erer" role="tabpanel"> fff</div>
</div>
检查一下!不要忘记在 href 中的 id 名称之前包含 # 符号!
Bootstrap 3 或 4
一旦 CSS 不起作用,请使用 JavaScript 导航。 (如果只有 CSS 不起作用)
<!-- Bootstrap pills -->
<ul class="nav flex-column" id="v-pills-tab">
<li class="active">
<a data-toggle="pill" href="driver-details-tab">Driver Details</a>
</li>
<li>
<a data-toggle="pill" href="#erer">Register Driver</a>
</li>
</ul>
<div class="tab-content">
<div class="container-fluid drivers-main tab-pane active" id="driver-details-tab" role="tabpanel">
<div class="tab-pane" id="register-driver-tab" role="tabpanel">
asdsdd
</div>
<div class="container-fluid drivers-main tab-pane active" id="erer" role="tabpanel">
<div class="tab-pane" id="register-driver-tab" role="tabpanel">
ffffffffffffffffffffffffffff
</div>
</div>
<script>
$('#v-pills-tab a').on('click', function (e) {
e.preventDefault();
$(this).tab('show')
})
</script>