所以我在html页面中有一个简单的选项卡面板，我已将“淡入”类应用于活动选项卡，并将“淡入淡出”应用于其他选项卡。据我所知，我安装了我的脚本，标记看起来应该是根据我在网上看到的引导网站和其他文章，包括这里。但它仍然不会在标签之间消失或消失。
任何人都可以看到我做错了。
<div class="tab-wrapper">
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">About Us</a></li>
<li><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">What we do</a></li>
<li><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Our Team</a></li>
<li><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Latest Projects</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="home">
<div class="row">
<div class="col-md-7">
<h1 class="emphasise">About The Development Matrix</h1>
<p>A unique training and development proposition that brings together the very best people, ideas and solutions. Partnering with The Development Matrix gives you access to a network of training and development and commercially experienced professionals, that on their own are highly skilled but when connected become a single element committed to delivering the very best results for your business.</p>
<p>Specialist areas are:</p>
<ul class="list-unstyled">
<li><i class="fa fa-check-square"></i> Leadership</li>
<li><i class="fa fa-check-square"></i> Coaching</li>
<li><i class="fa fa-check-square"></i> Team Development</li>
<li><i class="fa fa-check-square"></i> Graduate and Talent Development</li>
<li><i class="fa fa-check-square"></i> Organisational Development</li>
</ul>
<a href="#" class="btn btn-success btn-lg" role="button">Read More »</a>
</div>
<div class="col-md-5">
<a href="#"><img src="img/latest-projects/gallery.gif" alt=""></a>
</div>
</div>
</div>
<div class="tab-pane fade" id="profile">
<div class="row">
<div class="col-md-3">
<article>
<h1>Graduates</h1>
<p>Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis
felisi eger id justo maurisus convallicitur.</p>
<footer><p class="read-more"><a href="#">Read More »</a></p></footer>
</article>
</div>
<div class="col-md-3">
<article>
<h1>Leadership</h1>
<p>Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis
felisi eger id justo maurisus convallicitur.</p>
<footer><p class="read-more"><a href="#">Read More »</a></p></footer>
</article>
</div>
<div class="col-md-3">
<article>
<h1>Coaching</h1>
<p>Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis
felisi eger id justo maurisus convallicitur.</p>
<footer><p class="read-more"><a href="#">Read More »</a></p></footer>
</article>
</div>
<div class="col-md-3">
<article>
<h1>Assessment</h1>
<p>Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis
felisi eger id justo maurisus convallicitur.</p>
<footer><p class="read-more"><a href="#">Read More »</a></p></footer>
</article>
</div>
</div>
<div class="row">
<div class="col-md-3">
<article>
<h1>Graduates</h1>
<p>Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis
felisi eger id justo maurisus convallicitur.</p>
<footer><p class="read-more"><a href="#">Read More »</a></p></footer>
</article>
</div>
<div class="col-md-3">
<article>
<h1>Leadership</h1>
<p>Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis
felisi eger id justo maurisus convallicitur.</p>
<footer><p class="read-more"><a href="#">Read More »</a></p></footer>
</article>
</div>
<div class="col-md-3">
<article>
<h1>Coaching</h1>
<p>Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis
felisi eger id justo maurisus convallicitur.</p>
<footer><p class="read-more"><a href="#">Read More »</a></p></footer>
</article>
</div>
<div class="col-md-3">
<article>
<h1>Assessment</h1>
<p>Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis
felisi eger id justo maurisus convallicitur.</p>
<footer><p class="read-more"><a href="#">Read More »</a></p></footer>
</article>
</div>
</div>
</div>
<div class="tab-pane fade" id="messages">
<div class="row">
<div class="col-md-3">
<figure class="team-member"><img src="img/team/team-member.gif" alt="">
<figcaption>
<p class="team-name">Clive Bradley</p>
<p class="team-title">Managing Director</p>
<p class="team-description">Vestassapede et donec ut est liberos sus et eget sed eget quisqueta…</p>
<p class="read-more"><a href="#">Read More »</a></p>
</figcaption>
</figure>
</div>
<div class="col-md-3">
<figure class="team-member"><img src="img/team/team-member.gif" alt="">
<figcaption>
<p class="team-name">Andy Hughes</p>
<p class="team-title">Leadership & Coaching Consultant</p>
<p class="team-description">Vestassapede et donec ut est liberos sus et eget sed eget quisqueta…</p>
<p class="read-more"><a href="#">Read More »</a></p>
</figcaption>
</figure>
</div>
<div class="col-md-3">
<figure class="team-member"><img src="img/team/team-member.gif" alt="">
<figcaption>
<p class="team-name">Sue Smith</p>
<p class="team-title">Management Development & Coaching Consultant</p>
<p class="team-description">Vestassapede et donec ut est liberos sus et eget sed eget quisqueta…</p>
<p class="read-more"><a href="#">Read More »</a></p>
</figcaption>
</figure>
</div>
<div class="col-md-3">
<figure class="team-member"><img src="img/team/team-member.gif" alt="">
<figcaption>
<p class="team-name">Hilary Pearl</p>
<p class="team-title">Organisational Development Consultant</p>
<p class="team-description">Vestassapede et donec ut est liberos sus et eget sed eget quisqueta…</p>
<p class="read-more"><a href="#">Read More »</a></p>
</figcaption>
</figure>
</div>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<figure class="team-member"><img src="img/team/team-member.gif" alt="">
<figcaption>
<p class="team-name">Anita Wild</p>
<p class="team-title">Accreditation & Qualification Consultant</p>
<p class="team-description">Vestassapede et donec ut est liberos sus et eget sed eget quisqueta…</p>
<p class="read-more"><a href="#">Read More »</a></p>
</figcaption>
</figure>
</div>
<div class="col-md-3">
<figure class="team-member"><img src="img/team/team-member.gif" alt="">
<figcaption>
<p class="team-name">Hilary Wilson</p>
<p class="team-title">Coaching Consultant</p>
<p class="team-description">Vestassapede et donec ut est liberos sus et eget sed eget quisqueta…</p>
<p class="read-more"><a href="#">Read More »</a></p>
</figcaption>
</figure>
</div>
<div class="col-md-3">
<figure class="team-member"><img src="img/team/team-member.gif" alt="">
<figcaption>
<p class="team-name">Kitt Rudd</p>
<p class="team-title">Team Development Consultant</p>
<p class="team-description">Vestassapede et donec ut est liberos sus et eget sed eget quisqueta…</p>
<p class="read-more"><a href="#">Read More »</a></p>
</figcaption>
</figure>
</div>
<div class="col-md-3">
<figure class="team-member"><img src="img/team/team-member.gif" alt="">
<figcaption>
<p class="team-name">Andrea Lewis</p>
<p class="team-title">Graduate Consultant</p>
<p class="team-description">Vestassapede et donec ut est liberos sus et eget sed eget quisqueta…</p>
<p class="read-more"><a href="#">Read More »</a></p>
</figcaption>
</figure>
</div>
</ul>
</div>
</div>
<div class="tab-pane fade" id="settings">
<div class="row">
<div class="col-md-3">
<article>
<a href="#"><img src="img/latest-projects/gallery.gif" alt=""></a>
<h1>Graduates</h1>
<p>Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis
felisi eger id justo maurisus convallicitur.</p>
<footer><p class="read-more"><a href="#">Read More »</a></p></footer>
</article>
</div>
<div class="col-md-3">
<article>
<a href="#"><img src="img/latest-projects/gallery.gif" alt=""></a>
<h1>Leadership</h1>
<p>Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis
felisi eger id justo maurisus convallicitur.</p>
<footer><p class="read-more"><a href="#">Read More »</a></p></footer>
</article>
</div>
<div class="col-md-3">
<article>
<a href="#"><img src="img/latest-projects/gallery.gif" alt=""></a>
<h1>Coaching</h1>
<p>Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis
felisi eger id justo maurisus convallicitur.</p>
<footer><p class="read-more"><a href="#">Read More »</a></p></footer>
</article>
</div>
<div class="col-md-3">
<article>
<a href="#"><img src="img/latest-projects/gallery.gif" alt=""></a>
<h1>Assessment</h1>
<p>Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis
felisi eger id justo maurisus convallicitur.</p>
<footer><p class="read-more"><a href="#">Read More »</a></p></footer>
</article>
</div>
</div>
</div>
</div>
</div>
</div>
这是css
.body-content-wrapper .tab-pane {
padding: 20px 25px 15px 25px;
border: 1px solid #E5E4E3;
border-top:0;
}
.tab-wrapper .nav-tabs li a {
display: block;
padding: 10px 20px;
border: 1px solid #E5E4E3;
border-bottom:#fff;
}
.tab-wrapper .nav-tabs li a {
background:#a0cc37;
color:#fff;
}
.tab-wrapper .nav-tabs li a:hover {
color:#3e4440;
background:#ccc;
}
.tab-wrapper .nav-tabs > .active > a {
background:#fff;
color:#3e4440;
border-bottom:#fff solid 1px;
}
我尝试用各种不同的方式编写它，并通过从bootstrap网站粘贴示例回到基础，但没有任何改变。它仍然是一样的。