【发布时间】：2020-07-24 01:16:35
【问题描述】：
我对选项卡中的选项卡有疑问。我没有使用自定义 CSS。我正在使用引导程序。 非常感谢。
<div class="container-fluid">
<!-- Tabs -->
<ul class="nav nav-tabs">
<li class="active">
<a id="1" href="#">Tab 1</a>
</li>
<li><a id="2" href="#">Tab 2</a></li>
<li><a id="3" href="#">Tab 3</a></li>
</ul>
<div class="tabContent" id="tabContent1">
Tab Content 1
<ul class="nav nav-tabs inertabs">
<li class="active">
<a id="11" href="#">T11</a>
</li>
<li><a id="12" href="#">T12</a></li>
<li><a id="13" href="#">T13</a></li>
<li><a id="14" href="#">WK</a></li>
<li><a id="15" href="#">MND</a></li>
<li><a id="16" href="#">YTD</a></li>
</ul>
<div class="tabContent1" id="tabContent111">
Tab Content 11
</div>
<div class="tabContent1" id="tabContent112">
Tab Content 12
</div>
<div class="tabContent1" id="tabContent113">
Tab Content 13
</div>
</div>
<div class="tabContent" id="tabContent2">
Tab Content 2
</div>
<div class="tabContent" id="tabContent3">
Tab Content 3
</div>
</div>
<script type="text/javascript">
$('.nav a').click(function (e) {
$(this).tab('show');
var tabContent = '#tabContent' + this.id;
$('#tabContent1').hide();
$('#tabContent2').hide();
$('#tabContent3').hide();
$(tabContent).show();
})
$('.inertabs a').click(function (e) {
$(this).tab('show');
var tabContent = '#tabContent' + this.id;
$('#tabContent11').hide();
$('#tabContent12').hide();
$('#tabContent13').hide();
$(tabContent).show();
})
</script>
如您所见，我已经完成了一半以上。 当有人单击选项卡 tab1。 Tab 2 和 Tab 3 保持隐藏。 但是当我点击 Tab11 的惰性选项卡时。它应该像父标签一样工作。 并且父母标签不应该隐藏。
我会很感激的
【问题讨论】：
标签： html css bootstrap-4