我有一个模态控件，单击链接时会弹出。此模态控件有一个选项卡控件，其中包含3个选项卡。当模态打开并单击一个选项卡时，该选项卡确实切换到单击的那个选项卡窗格消失。如何防止选项卡窗格消失？我正在使用Bootstrap v4.2.1
这是我的网站的链接，那里的问题是http://www.nakireddi.com/。 如果单击myworks链接，则会弹出带有选项卡窗格的模式。下面是带有选项卡窗格的模式的代码。
<div id="MyWorks" aria-hidden="true" aria-labelledby="exampleModalLongTitle" class="modal fade" role="dialog"
tabindex="-1">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content fullscreencontent">
<div class="modal-header">
<h5 id="MyWorksTitle" class="modal-title">
My Works
</h5>
<button aria-label="Close" class="close" data-dismiss="modal" type="button">
<span aria-hidden="true"> × </span>
</button>
</div>
<div class="modal-body backgroundprism">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade show active" id="home">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" role="tab" href="#home">All</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" role="tab" href="#websites">Websites</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" role="tab" href="#themes">Themes</a>
</li>
</ul>
<br />
<div class="row">
<div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<div class="card border-warning mb-3 animated fadeIn " id="ChibiTaxi" style=" margin-left: 7px; ">
<div class="card-header">Taxi-Bootstrap template</div>
<div class="card-body">
Content
</div>
</div>
</div>
<div class="tab-pane fade" id="websites">
<div class="row">
<iv class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<div class="card border-danger mb-3 animated " style=" margin-left: 7px; ">
<div class="card-header">Chemical Factory-Website</div>
<div class="card-body">
Content
</div>
</div>
</div>
<div class="tab-pane fade" id="themes">
<div class="row">
<div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<div class="card border-warning mb-3 animated fadeIn " style=" margin-left: 7px; ">
<div class="card-header">Taxi-Bootstrap template</div>
<div class="card-body">
Content
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" type="button">
Close
</button>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link btn btn-danger active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">All</a>
<a class="nav-item nav-link btn btn-danger" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Websites</a>
<a class="nav-item nav-link btn btn-danger" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Themes</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<div class="row">
<div class="col-md-3 col-12">
<img width="100%" src="https://media.wired.com/photos/5c1ae77ae91b067f6d57dec0/master/pass/Comparison-City-MAIN-ART.jpg" alt="">
</div>
<div class="col-md-3 col-12">
<img width="100%" src="https://media.wired.com/photos/5c1ae77ae91b067f6d57dec0/master/pass/Comparison-City-MAIN-ART.jpg" alt="">
</div>
<div class="col-md-3 col-12">
<img width="100%" src="https://media.wired.com/photos/5c1ae77ae91b067f6d57dec0/master/pass/Comparison-City-MAIN-ART.jpg" alt="">
</div>
<div class="col-md-3 col-12">
<img width="100%" src="https://media.wired.com/photos/5c1ae77ae91b067f6d57dec0/master/pass/Comparison-City-MAIN-ART.jpg" alt="">
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
<div class="row">
<div class="col-md-4 col-12">
<img width="100%" src="https://media.wired.com/photos/5c1ae77ae91b067f6d57dec0/master/pass/Comparison-City-MAIN-ART.jpg" alt="">
</div>
<div class="col-md-4 col-12">
<img width="100%" src="https://media.wired.com/photos/5c1ae77ae91b067f6d57dec0/master/pass/Comparison-City-MAIN-ART.jpg" alt="">
</div>
<div class="col-md-4 col-12">
<img width="100%" src="https://media.wired.com/photos/5c1ae77ae91b067f6d57dec0/master/pass/Comparison-City-MAIN-ART.jpg" alt="">
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
<div class="row">
<div class="col-md-3 col-12">
<img width="100%" src="https://media.wired.com/photos/5c1ae77ae91b067f6d57dec0/master/pass/Comparison-City-MAIN-ART.jpg" alt="">
</div>
<div class="col-md-3 col-12">
<img width="100%" src="https://media.wired.com/photos/5c1ae77ae91b067f6d57dec0/master/pass/Comparison-City-MAIN-ART.jpg" alt="">
</div>
<div class="col-md-3 col-12">
<img width="100%" src="https://media.wired.com/photos/5c1ae77ae91b067f6d57dec0/master/pass/Comparison-City-MAIN-ART.jpg" alt="">
</div>
<div class="col-md-3 col-12">
<img width="100%" src="https://media.wired.com/photos/5c1ae77ae91b067f6d57dec0/master/pass/Comparison-City-MAIN-ART.jpg" alt="">
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
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>
</body>
</html>
希望会有所帮助