<!-- 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
答案 0 :(得分:4)
使用这样的药片:
<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>
请注意我添加的课程。
答案 1 :(得分:1)
<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名称之前的#符号!
答案 2 :(得分:0)
引导程序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>
答案 3 :(得分:-1)
您只需将Bootstrap 4使用的Javascript脚本导入您的html标题。
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>