twitter-bootstrap Bootstrap 4 导航药丸不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47327244/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 nav pills are not working
提问by Harish
<!-- 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>Hello, I'm using nav-pills in bootstrap but for some reason it is not working properly, Please take a look at the code above, I haven't included bootstrap in the above fiddle
你好，我在 bootstrap 中使用了 nav-pills 但由于某种原因它不能正常工作，请看上面的代码，我没有在上面的 fiddle 中包含 bootstrap
回答by Klooven
Use something like this for the pills:
使用这样的药丸：
<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>
Note the classes that I've added.
请注意我添加的类。
回答by Godsave
<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>
Check that out! Don't forget to include the # sign before the id name in href as well!
检查出！不要忘记在href 中的id 名称前也包含# 符号！
回答by Surya R Praveen
Bootstrap 3 or 4
引导程序 3 或 4
Once CSS is not working, kindly use the JavaScript to navigate. (If only CSS doesn't work)
一旦 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>
