a-tab-pane 二级联动
时间: 2023-07-30 13:07:31 浏览: 108
a-tab-pane 通常用于 Bootstrap 样式的标签页切换。如果想要实现二级联动,可以在 a-tab-pane 的内容区域中嵌套另一个 a-tab-pane。
具体实现步骤如下:
1. 在一级 a-tab-pane 中添加需要联动的选项卡,每个选项卡对应一个二级 a-tab-pane。
2. 在二级 a-tab-pane 中添加需要联动的选项卡。
3. 在一级 a-tab-pane 的选项卡中添加 data-target 属性,指向对应的二级 a-tab-pane。
4. 在二级 a-tab-pane 的选项卡中添加 data-parent 属性,指向对应的一级 a-tab-pane。
这样,当一级 a-tab-pane 的选项卡被点击时,就会显示对应的二级 a-tab-pane,并且二级 a-tab-pane 中的选项卡也会联动切换。
示例代码如下:
```html
<div class="container">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tab1" role="tab">一级选项卡1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab2" role="tab">一级选项卡2</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab1" role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#subtab1" role="tab" data-target="#subtab1" data-parent="#tab1">二级选项卡1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#subtab2" role="tab" data-target="#subtab2" data-parent="#tab1">二级选项卡2</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="subtab1" role="tabpanel">
二级选项卡1的内容
</div>
<div class="tab-pane fade" id="subtab2" role="tabpanel">
二级选项卡2的内容
</div>
</div>
</div>
<div class="tab-pane fade" id="tab2" role="tabpanel">
一级选项卡2的内容
</div>
</div>
</div>
```