我在javascript中工作，我使用了引导组件标签栏，但是当我第一次在谷歌浏览器中运行代码时，如果选择第二个栏显示内容，则选择第一个栏显示内容，然后不起作用之后它只显示第二个栏的内容，无法返回第一个或最后一个栏。
我尝试添加类"显示"，但没有工作.我在另一个div 中使用过，但没有工作。
<div class="col-12 text-center">
<h3 class="heading"> Portofolio </h3>
<div class="heading-underline"></div>
</div>
<ul class="nav nav-tabs justify-content-center" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">first</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">secound</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">last</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="homes" role="tabpanel" aria-labelledby="home-tab">...
my first show
<div class="tab-pane fade " id="profile" role="tabpanel" aria-labelledby="profile-tab">
<p> my secound show here</p>
</div>
<div class="tab-pane fade " id="contactss" role="tabpanel" aria-labelledby="contact-tab"><p> my last show here </p></div>
</div>
从div 中删除淡入淡出类。这是淡入淡出类的问题。我遇到了同样的问题，删除淡入淡出类后它工作正常。
最后一个选项卡的 ID 存在拼写错误，这就是它没有显示的原因。
这是你想要的吗？
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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="./main.js"></script>
<link rel="stylesheet" href="style.css">
<title>Hello, world!</title>
</head>
<body>
<div class="col-12 text-center">
<h3 class="heading"> Portfolio </h3>
<div class="heading-underline"></div>
</div>
<ul class="nav nav-tabs justify-content-center" id="myTab" role="tablist">
<li class="nav-item active">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="false">first</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">second</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">last</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade in active show" id="home" role="tabpanel" aria-labelledby="home-tab">...
my first show</div>
<div class="tab-pane fade " id="profile" role="tabpanel" aria-labelledby="profile-tab">
<p> my second show here</p>
</div>
<div class="tab-pane fade " id="contact" role="tabpanel" aria-labelledby="contact-tab"><p> my last show here </p></div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>