如何使用jQuery / bootstrap通过两组选项卡控制一个内容区域

Question

我是jQuery和Bootstrap 3的新手，非常感谢你的帮助。

我希望通过两组独立选项卡的组合来控制单个内容区域。例如，如果选择“显示1”和“显示B”选项卡，则仅显示内容窗格1B。

有什么想法吗？谢谢！

<ul class="nav nav-tabs" id="myTab1">
    <li class="active"><a data-toggle="tab" href="#1">Show 1</a></li>
    <li><a data-toggle="tab" href="#2">Show 2</a></li>
</ul>

<ul class="nav nav-tabs" id="myTab2">
    <li class="active"><a data-toggle="tab" href="#A">Show A</a></li>
    <li><a data-toggle="tab" href="#B">Show B</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="1A">1A</div>
    <div class="tab-pane" id="1B">1B</div>
    <div class="tab-pane" id="2A">2A</div>
    <div class="tab-pane" id="2B">2B</div>
</div>