bootstrap动态添加Tab标签页
时间: 2023-06-29 13:09:15 浏览: 90
要动态添加 Bootstrap 的 Tab 标签页,需要使用 JavaScript 和 jQuery。以下是一个简单的示例:
```html
<!-- HTML 结构 -->
<ul class="nav nav-tabs" id="myTab">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home">
<p>Home tab content</p>
</div>
</div>
<!-- JavaScript 代码 -->
<script>
// 获取标签页容器和内容容器
var tabContainer = $('#myTab');
var contentContainer = $('#myTabContent');
// 动态添加一个标签页和内容
var newTab = $('<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#newTab">New Tab</a></li>');
var newContent = $('<div class="tab-pane fade" id="newTab"><p>New tab content</p></div>');
tabContainer.append(newTab);
contentContainer.append(newContent);
// 激活新标签页
newTab.find('a').tab('show');
</script>
```
上述代码中,我们首先获取了标签页容器和内容容器。然后,我们创建了一个新的标签页和内容,并将它们添加到容器中。最后,我们激活了新的标签页。