当多次单击时，引导选项卡不会更改内容

Question

我一直试图在我的一个页面中实现tab。代码如下。

<div class="row justify-content-between">
<div class="col-lg-3">
<a class="nav-link p-3 mb-2 sidebar-link justify-content-between text-success ml-4" href="#1" data-toggle="tab">
<h4 class="text-success size">Vehicles</h4>
</a>
<a class="nav-link p-3 mb-2 sidebar-link justify-content-between ml-4" href="#2" data-toggle="tab">
<h4 class="text-success size">Battery</h4>
</a>
<a class="nav-link p-3 mb-2 sidebar-link justify-content-between ml-4" href="#3" data-toggle="tab">
<h4 class="text-success size">Charging</h4>
</a>
</div>
<div class="tab-content  col-lg-9">
<div class="tab-pane active" id="1">
<!-- Content here -->
</div>
<div class="tab-pane" id="2">
<!-- content here -->
</div>
<div class="tab-pane" id="3">
<!-- content here -->
</div>
</div>
</div>

我所做的是，我创建了两列，一列包含链接，另一列包含根据单击的链接显示数据的区域。运行时，代码实际上只运行一次，即当第一次单击链接时，它会在右侧显示相应的内容。但当我尝试访问另一个链接时，它不起作用。它只起一次作用。无论我想在数据之间切换多少次，我都应该做些什么来让它们工作？

Answer 1

您没有为导航选项卡添加"导航选项卡"列表容器。现在，您的所有链接都作为一个独立的内部链接工作。因此，它只需点击一下即可工作。

这是更新代码

<div class="row justify-content-between">
<div class="col-lg-3">
<ul class="nav nav-tabs">
<li class="active"><a class="nav-link p-3 mb-2 sidebar-link justify-content-between text-success ml-4" href="#1" data-toggle="tab">
<h4 class="text-success size">Vehicles</h4>
</a>
</li>
<li>
<a class="nav-link p-3 mb-2 sidebar-link justify-content-between ml-4" href="#2" data-toggle="tab">
<h4 class="text-success size">Battery</h4>
</a>
</li>
<li>
<a class="nav-link p-3 mb-2 sidebar-link justify-content-between ml-4" href="#3" data-toggle="tab">
<h4 class="text-success size">Charging</h4>
</a>
</li>
</div>
<div class="tab-content  col-lg-9">
<div class="tab-pane fade in active" id="1">
<!-- Content here -->
</div>
<div class="tab-pane fade" id="2">
<!-- content here -->
</div>
<div class="tab-pane fade" id="3">
<!-- content here -->
</div>
</div>
</div>

如果它符合您的要求，请告诉我。

Answer 2

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

<div class="container">
<div class="row">
<div class="col-xs-12">
<nav>
<div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
<a class="nav-item nav-link active " role="tab" aria-selected="true" href="#1" data-toggle="tab">
<h4 class="text-success size">Vehicles</h4>
</a>
<a class="nav-item nav-link " href="#2" role="tab" aria-selected="false" data-toggle="tab">
<h4 class="text-success size">Battery</h4>
</a>
<a class="nav-item nav-link " href="#3" role="tab" aria-selected="false" data-toggle="tab">
<h4 class="text-success size">Charging</h4>
</a>
</div>
</nav>
<div class="tab-content">
<div class="tab-pane active" id="1">
<!-- Content here -->
<h1>Hello</h1>
</div>
<div class="tab-pane" id="2">
<!-- content here -->
<h1>hi</h1>
</div>
<div class="tab-pane" id="3">
<!-- content here -->
<h1>why</h1>
</div>
</div>
</div>
</div>
</div>

请检查这个解决方案，希望它对你有效。