У меня есть модальный элемент управления, который появляется при нажатии на ссылку. Этот модальный элемент управления имеет элемент управления с вкладками, с 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>