<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Yellow Section -->
<div class="accordion" id="expandInfo">
<section id="yello" class="py-5">
<div class="container">
<div class="row ">
<div class="col-md-12" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="nav-tabs" role="tablist">
<!--start featured video -->
<div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center panel">
<h3 class="iconyell">Featured Video</h3>
<p>Women's Self-Defense</p>
<li role="presentation" class="active">
<a href="#viewVideo" aria-controls="viewVideo" role="tab" data-toggle="tab">
<button type="button" class="btn">SEE VIDEO</button>
</a>
</li>
</div>
<!--end featured video -->
<!-- start train -->
<div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center panel">
<h3 class="iconyell">Train With Us</h3>
<p>Why You Should</p>
<li role="presentation">
<a href="#whyUs" aria-controls="whyUs" role="tab" data-toggle="tab">
<button type="button" class="btn">WHY US?</button>
</a>
</li>
</div>
<!--end train-->
<!--start instruct -->
<div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center panel">
<h3 class="iconyell">Your Instructor</h3>
<p>Get To Know Us</p>
<li role="presentation">
<a href="#yourInstructor" aria-controls="yourInstructor" role="tab" data-toggle="tab">
<button type="button" class="btn">MEET US</button>
</a>
</li>
</div>
<!--end instruct-->
</ul>
</div>
</div>
</div>
</section>
<!-- Collapsible Element HTML -->
<!-- Tab panes -->
<div class="tab-content" id="tabs-collapse">
<!--start viewVideo area -->
<div role="tabpanel" class="tab-pane fade in" id="viewVideo">
<div class="row" style="padding: 20px;background-color: white">
<div class="col-md-5">
<div class="embed-responsive embed-responsive-4by3 su-youtube" style="width: 90%">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/WVm3D9kqows"></iframe>
</div>
</div>
<div class="col-md-7" style="padding: 20px;">
<h2 class="whyUsheader">Women's Self-Defense Course</h2>
</div>
</div>
</div>
<!--end viewVideo area -->
<!--start whyUs area -->
<!--start whyUs area -->
<div role="tabpanel" class="tab-pane fade in" id="whyUs">
<div class="row" style="padding: 20px;background-color: white">
<div class="col-md-5">
<div class="embed-responsive">
<img src="image/why-join-mousels-mixed-martial-arts.JPG" width="442" height="370" alt="Why join Mousel's Mixed Martial Arts Academy" class="img-fluid img-thumbnail rounded mx-auto d-block">
</div>
</div>
<div class="col-md-7">
<h2 class="whyUsheader">Why you should choose us...</h2>
<p class="abouttitle">Sharing knowledge and helping others reach their full potential is what we do best.
</p>
</div>
</div>
</div>
<!--end whyUs area -->
<!--end whyUs area -->
<!--start yourInstructor area -->
<div role="tabpanel" class="tab-pane fade in" id="yourInstructor">
<div class="row" style="padding: 20px;background-color: white">
<div class="col-md-8">
<h2 class="whyUsheader text-center">Tim Mousel</h2>
<p class="whyUstext py-4 px-0">Tim Mousel is the owner of
<a href="http://www.defend.net/">Mousel's Mixed Martial Arts Academy</a>,
<a href="https://www.womens-self-defense.org/">Women's Self-Defense</a>, and
<a href="https://www.edge-trainer.com/">The Edge Personal Training</a>.
</p>
<p class="whyUstext py-4 px-0">Tim has trained many of Houston's top martial arts instructors and has students he has trained compete at the highest levels of mixed martial arts competition including the
<strong>Ultimate Fighting Championship</strong> (UFC),
<strong>King of the Cage</strong>,
<strong>Pride</strong>, national kickboxing and Thai boxing championships, amateur and professional boxing. Tim was also the Strength and Conditioning Coach for two-time world boxing champion
<a href="http://www.reggiesweetjohnson.com/" target="_blank">Reggie Johnson</a>.
</p>
</div>
</div>
</div>
<!--end yourInstructor area -->
</div>
</div>
<!--end container-->
当我单击一个选项卡时，它会显示该选项卡的内容，但是如果我第二次单击它，则不会。您可以在启动时看到它的作用： https://www.bootply.com/4gEG55Wgr4
我已经尝试过Bootstrap 4 - Dropdowns only work one times with tabs menu上的建议，但没有任何区别。
任何建议将不胜感激，
蒂姆
答案 0 :(得分：1)
检查以下代码段。这里<a class="nav-item nav-link" id="tabNo" data-toggle="tab" href="#myTabN o" role="tab" aria-controls="nav-profile" aria-selected="false">应该是父元素，因为class ="active"会随着制表符的更改而改变
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Yellow Section -->
<div class="container-fluid">
<nav>
<div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
<a class="nav-item nav-link " id="tab1" data-toggle="tab" href="#myTab1" role="tab" aria-controls="nav-home" aria-selected="true">
<div class="col-sm-12">
<h3 class="iconyell">Featured Video</h3>
<p>Women's Self-Defense</p>
<li role="presentation" class="active">
<button type="button" class="btn">SEE VIDEO</button>
</li>
</div>
</a>
<a class="nav-item nav-link" id="tab2" data-toggle="tab" href="#myTab2" role="tab" aria-controls="nav-profile" aria-selected="false">
<div class="col-sm-12 ">
<h3 class="iconyell">Train With Us</h3>
<p>Why You Should</p>
<li role="presentation">
<button type="button" class="btn">WHY US?</button>
</li>
</div>
</a>
<a class="nav-item nav-link" id="tab3" data-toggle="tab" href="#myTab3" role="tab" aria-controls="nav-contact" aria-selected="false">
<div class="col-sm-12 ">
<h3 class="iconyell">Your Instructor</h3>
<p>Get To Know Us</p>
<li role="presentation">
<button type="button" class="btn">MEET US</button>
</li>
</div>
</a>
</div>
</nav>
<div class="tab-content " id="nav-tabContent">
<div class="tab-pane fade " id="myTab1" role="tabpanel" aria-labelledby="tab1">
<div class="row" style="padding: 20px;background-color: white">
<div class="col-md-5">
<div class="embed-responsive embed-responsive-4by3 su-youtube" style="width: 90%">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/WVm3D9kqows"></iframe>
</div>
</div>
<div class="col-md-7" style="padding: 20px;">
<h2 class="whyUsheader">Women's Self-Defense Course</h2>
</div>
</div>
</div>
<div class="tab-pane fade" id="myTab2" role="tabpanel" aria-labelledby="tab2">
<div class="row" style="padding: 20px;background-color: white">
<div class="col-md-5">
<div class="embed-responsive">
<img src="image/why-join-mousels-mixed-martial-arts.JPG" width="442" height="370" alt="Why join Mousel's Mixed Martial Arts Academy" class="img-fluid img-thumbnail rounded mx-auto d-block">
</div>
</div>
<div class="col-md-7">
<h2 class="whyUsheader">Why you should choose us...</h2>
<p class="abouttitle">Sharing knowledge and helping others reach their full potential is what we do best.
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="myTab3" role="tabpanel" aria-labelledby="tab3">
<div class="row" style="padding: 20px;background-color: white">
<div class="col-md-8">
<h2 class="whyUsheader text-center">Tim Mousel</h2>
<p class="whyUstext py-4 px-0">Tim Mousel is the owner of
<a href="http://www.defend.net/">Mousel's Mixed Martial Arts Academy</a>,
<a href="https://www.womens-self-defense.org/">Women's Self-Defense</a>, and
<a href="https://www.edge-trainer.com/">The Edge Personal Training</a>.
</p>
<p class="whyUstext py-4 px-0">Tim has trained many of Houston's top martial arts instructors and has students he has trained compete at the highest levels of mixed martial arts competition including the
<strong>Ultimate Fighting Championship</strong> (UFC),
<strong>King of the Cage</strong>,
<strong>Pride</strong>, national kickboxing and Thai boxing championships, amateur and professional boxing. Tim was also the Strength and Conditioning Coach for two-time world boxing champion
<a href="http://www.reggiesweetjohnson.com/" target="_blank">Reggie Johnson</a>.
</p>
</div>
</div>
</div>
</div>
</div>
<!--end container-->