【发布时间】：2019-07-26 12:52:54
【问题描述】：
我正在开发引导选项卡，我正在尝试使用具有多个内容 div 的单个选项卡。我尝试过使用两个数据目标值，例如data-target=".etab-p1, .etabi-img1"。但它仅适用于一个内容 div，其他第二个内容不会改变。
$(document).ready(function() {
$('#myTab a').click(function() {
var href = $(this).attr('href');
if (href == "[href^='tab-']") {
$('.tab-pane').css('display', 'none');
$("[class^='etab-'][class^='etabi-']").removeClass('show');
$("[class^='etab-'][class^='etabi-']").css('display', 'block');
$("[class^='etab-'][class^='etabi-']").addClass('show');
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<ul id="myTab" class="nav nav-tabs" role="tablist">
<li class="nav-item"><a class="nav-link" href="#tab-1" data-target=".etab-p1, .etabi-img1" data-toggle="tab">C1</a></li>
<li class="nav-item"><a class="nav-link" href="#tab-2" data-target=".etab-p2, .etabi-img2" data-toggle="tab">C2</a></li>
<li class="nav-item"><a class="nav-link" href="#tab-3" data-target=".etab-p3, .etabi-img3" data-toggle="tab">C3</a></li>
<li class="nav-item"><a class="nav-link" href="#tab-4" data-target=".etab-p4, .etabi-img4" data-toggle="tab">C4</a></li>
<li class="nav-item"><a class="nav-link" href="#tab-5" data-target=".etab-p5, .etabi-img5" data-toggle="tab">C5</a></li>
<li class="nav-item"><a class="nav-link" href="#tab-6" data-target=".etab-p6, .etabi-img6" data-toggle="tab">C6</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active etab-p1">
<p>Content 1.</p>
</div>
<div class="tab-pane fade etab-p2">
<p>Content 2.</p>
</div>
<div class="tab-pane fade etab-p3">
<p>Content 3.</p>
</div>
<div class="tab-pane fade etab-p4">
<p>Content 4.</p>
</div>
<div class="tab-pane fade etab-p5">
<p>Content 5.</p>
</div>
<div class="tab-pane fade etab-p6">
<p>Content 6.</p>
</div>
</div>
<div class="tab-content">
<div class="tab-pane fade show active etabi-img1">
<p>Content 111.</p>
</div>
<div class="tab-pane fade etabi-img2">
<p>Content 2222.</p>
</div>
<div class="tab-pane fade etabi-img3">
<p>Content 3333.</p>
</div>
<div class="tab-pane fade etabi-img4">
<p>Content 4444.</p>
</div>
<div class="tab-pane fade etabi-img5">
<p>Content 5555.</p>
</div>
<div class="tab-pane fade etabi-img6">
<p>Content 6666.</p>
</div>
</div>【问题讨论】：
-
你想当小提琴，2 你提到我有两个标签，这是否意味着你已经有两个标签，还想要两个。
-
@NickCoder 实际上我已经尝试了多种方法，但无法实现所需的输出，这就是为什么如果有人发布小提琴它将有助于理解代码并显示它可以正常工作。
-
-
@NickCoder 简单的两个选项卡在同一页面上工作，每个选项卡都有两个内容 div，当单击选项卡时，两个 div 必须更改
-
您想仅使用 bootstrap 4 选项卡或任何其他方式来实现此目的吗？
标签： javascript jquery html css bootstrap-4