Bootstrap 中的选项卡导航不起作用
[英]Tab Navigation in Bootstrap is not Working
问题描述
我坚持让导航栏上的选项卡与引导程序一起使用。 单击选项卡链接时，URL 会更改，但 html 不会更改为新选项卡。 选项卡是可点击的并且链接会更改，但数据不会刷新到新选项卡。 我正在使用 bootstrap 4。我还需要使用 add Jquery 代码来完成这项工作吗？ 我做错了什么？
<div class="container mt-5">
<!--Section: Content-->
<section class="dark-grey-text text-center">
<style>
.md-pills .nav-link.active {
background-color: #3f51b5;
}
</style>
<!-- Section heading -->
<h3 class="font-weight-bold mb-4 pb-2">Our best projects</h3>
<!-- Section description -->
<p class="text-muted w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum quas, eos officia maiores ipsam ipsum dolores reiciendis ad voluptas, animi obcaecati adipisci sapiente mollitia. </p>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-12">
<!-- Nav tabs -->
<ul class="nav md-pills flex-center flex-wrap mx-0" role="tablist">
<li class="nav-item">
<a class="nav-link active font-weight-bold" data-toggle="tab" href="#panel31" role="tab">ALL</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" data-toggle="tab" href="#panel32" role="tab">BRANDING</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" data-toggle="tab" href="#panel33" role="tab">PACKAGING</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" data-toggle="tab" href="#panel34" role="tab">PRINT DESIGN</a>
</li>
</ul>
</div>
<!--First column-->
</div>
<!--First row-->
<!--Tab panels-->
<div class="tab-content">
<!--Panel 1-->
<div class="tab-pane fade show in active" id="panel31" role="tabpanel">
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project1.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--First column-->
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project8.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Second column-->
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project4.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Third column-->
</div>
<!--First row-->
<!--Tab panels-->
<div class="tab-content">
<!--Panel 1-->
<div class="tab-pane fade show in active" id="panel31" role="tabpanel">
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project1.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--First column-->
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project8.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Second column-->
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project4.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Third column-->
</div>
<!--First row-->
<!--Tab panels-->
<div class="tab-content">
<!--Panel 1-->
<div class="tab-pane fade show in active" id="panel31" role="tabpanel">
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project1.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--First column-->
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project8.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Second column-->
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project4.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Third column-->
</div>
<!--First row-->
</div>
<!--Panel 1-->
<!--Panel 2-->
<div class="tab-pane fade" id="panel32" role="tabpanel">
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project4.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--First column-->
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project5.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Second column-->
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project1.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor
amet</p>
</div>
<!--Third column-->
</div>
<!--First row-->
</div>
<!--Panel 2-->
<!--Panel 3-->
<div class="tab-pane fade" id="panel33" role="tabpanel">
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project3.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--First column-->
<!--Second column-->
<div class="col-lg-4 col-md-6">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project6.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Second column-->
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project8.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Third column-->
</div>
<!--First row-->
</div>
<!--Panel 3-->
<!--Panel 4-->
<div class="tab-pane fade" id="panel34" role="tabpanel">
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project1.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--First column-->
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project7.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Second column-->
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project8.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Third column-->
</div>
<!--First row-->
</div>
<!--Panel 4-->
</div>
<!--Tab panels-->
</section>
</div>
1 个解决方案
解决方案1
0 已采纳 2020-09-24 18:30:10
尝试这个
您将在3 次添加 panel-1 删除并添加Bootstrap CSS 和 JS CDN 。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <div class="container mt-5"> <!--Section: Content--> <section class="dark-grey-text text-center"> <style> .md-pills .nav-link.active { background-color: #3f51b5; } </style> <!-- Section heading --> <h3 class="font-weight-bold mb-4 pb-2">Our best projects</h3> <!-- Section description --> <p class="text-muted w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum quas, eos officia maiores ipsam ipsum dolores reiciendis ad voluptas, animi obcaecati adipisci sapiente mollitia. </p> <!--First row--> <div class="row"> <!--First column--> <div class="col-12"> <!-- Nav tabs --> <ul class="nav md-pills flex-center flex-wrap mx-0" role="tablist"> <li class="nav-item"> <a class="nav-link active font-weight-bold" data-toggle="tab" href="#panel31" role="tab">ALL</a> </li> <li class="nav-item"> <a class="nav-link font-weight-bold" data-toggle="tab" href="#panel32" role="tab">BRANDING</a> </li> <li class="nav-item"> <a class="nav-link font-weight-bold" data-toggle="tab" href="#panel33" role="tab">PACKAGING</a> </li> <li class="nav-item"> <a class="nav-link font-weight-bold" data-toggle="tab" href="#panel34" role="tab">PRINT DESIGN</a> </li> </ul> </div> <!--First column--> </div> <!--First row--> <!--Tab panels--> <div class="tab-content"> <!--Panel 1--> <div class="tab-pane fade show in active" id="panel31" role="tabpanel"> <!--First row--> <div class="row"> <!--First column--> <div class="col-lg-4 col-md-12 mb-4"> <!--Featured image--> <div class="view overlay zoom z-depth-2"> <img src="https://mdbootstrap.com/img/Photos/Others/project1.jpg" class="img-fluid"> </div> <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit amet</p> </div> <!--First column--> <!--Second column--> <div class="col-lg-4 col-md-6 mb-4"> <!--Featured image--> <div class="view overlay zoom z-depth-2"> <img src="https://mdbootstrap.com/img/Photos/Others/project8.jpg" class="img-fluid"> </div> <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit amet</p> </div> <!--Second column--> <!--Third column--> <div class="col-lg-4 col-md-6 mb-4"> <!--Featured image--> <div class="view overlay zoom z-depth-2"> <img src="https://mdbootstrap.com/img/Photos/Others/project4.jpg" class="img-fluid"> </div> <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit amet</p> </div> <!--Third column--> </div> <!--First row--> </div> <!--Panel 1--> <!--Panel 2--> <div class="tab-pane fade" id="panel32" role="tabpanel"> <!--First row--> <div class="row"> <!--First column--> <div class="col-lg-4 col-md-12 mb-4"> <!--Featured image--> <div class="view overlay zoom z-depth-2"> <img src="https://mdbootstrap.com/img/Photos/Others/project4.jpg" class="img-fluid"> </div> <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit amet</p> </div> <!--First column--> <!--Second column--> <div class="col-lg-4 col-md-6 mb-4"> <!--Featured image--> <div class="view overlay zoom z-depth-2"> <img src="https://mdbootstrap.com/img/Photos/Others/project5.jpg" class="img-fluid"> </div> <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit amet</p> </div> <!--Second column--> <!--Third column--> <div class="col-lg-4 col-md-6 mb-4"> <!--Featured image--> <div class="view overlay zoom z-depth-2"> <img src="https://mdbootstrap.com/img/Photos/Others/project1.jpg" class="img-fluid"> </div> <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor amet</p> </div> <!--Third column--> </div> <!--First row--> </div> <!--Panel 2--> <!--Panel 3--> <div class="tab-pane fade" id="panel33" role="tabpanel"> <!--First row--> <div class="row"> <!--First column--> <div class="col-lg-4 col-md-12 mb-4"> <!--Featured image--> <div class="view overlay zoom z-depth-2"> <img src="https://mdbootstrap.com/img/Photos/Others/project3.jpg" class="img-fluid"> </div> <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit amet</p> </div> <!--First column--> <!--Second column--> <div class="col-lg-4 col-md-6"> <!--Featured image--> <div class="view overlay zoom z-depth-2"> <img src="https://mdbootstrap.com/img/Photos/Others/project6.jpg" class="img-fluid"> </div> <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit amet</p> </div> <!--Second column--> <!--Third column--> <div class="col-lg-4 col-md-6 mb-4"> <!--Featured image--> <div class="view overlay zoom z-depth-2"> <img src="https://mdbootstrap.com/img/Photos/Others/project8.jpg" class="img-fluid"> </div> <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit amet</p> </div> <!--Third column--> </div> <!--First row--> </div> <!--Panel 3--> <!--Panel 4--> <div class="tab-pane fade" id="panel34" role="tabpanel"> <!--First row--> <div class="row"> <!--First column--> <div class="col-lg-4 col-md-12 mb-4"> <!--Featured image--> <div class="view overlay zoom z-depth-2"> <img src="https://mdbootstrap.com/img/Photos/Others/project1.jpg" class="img-fluid"> </div> <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit amet</p> </div> <!--First column--> <!--Second column--> <div class="col-lg-4 col-md-6 mb-4"> <!--Featured image--> <div class="view overlay zoom z-depth-2"> <img src="https://mdbootstrap.com/img/Photos/Others/project7.jpg" class="img-fluid"> </div> <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit amet</p> </div> <!--Second column--> <!--Third column--> <div class="col-lg-4 col-md-6 mb-4"> <!--Featured image--> <div class="view overlay zoom z-depth-2"> <img src="https://mdbootstrap.com/img/Photos/Others/project8.jpg" class="img-fluid"> </div> <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit amet</p> </div> <!--Third column--> </div> <!--First row--> </div> <!--Panel 4--> </div> <!--Tab panels--> </section> </div>
Bootstrap选项卡导航无法正常工作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.