bootstrap tabs addtab

Bootstrap tabs addtab 是 Bootstrap 一个非常常用的功能，可以动态地添加新的选项卡。

使用 Bootstrap tabs addtab 的方法如下：

1. 在 HTML 文件中，使用 `<ul>` 标签创建一个选项卡导航栏，为每个选项卡添加一个 `<li>` 元素。每个 `<li>` 元素中使用 `<a>` 标签定义选项卡的标题，并为其添加一个唯一的 ID，作为后续添加选项卡的标识。示例代码如下：

<ul class="nav nav-tabs" id="myTabs">
  <li class="active"><a href="#home" data-toggle="tab">首页</a></li>
  <li><a href="#profile" data-toggle="tab">个人资料</a></li>
  <li><a href="#messages" data-toggle="tab">消息</a></li>
</ul>

2. 在选项卡导航栏之后，使用 `<div>` 标签创建一个容器，为其添加一个唯一的 ID，用于后续添加选项卡内容。示例代码如下：

<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade in active" id="home">
    <h4>首页内容</h4>
    <p>这是首页的内容描述。</p>
  </div>
  <div class="tab-pane fade" id="profile">
    <h4>个人资料内容</h4>
    <p>这是个人资料的内容描述。</p>
  </div>
  <div class="tab-pane fade" id="messages">
    <h4>消息内容</h4>
    <p>这是消息的内容描述。</p>
  </div>
</div>

3. 在 JavaScript 文件或 `<script>` 标签中，使用以下代码来添加新的选项卡。示例代码如下：

$("#myTabs").append(`<li><a href="#newTab" data-toggle="tab">新选项卡</a></li>`);
$("#myTabContent").append(`
  <div class="tab-pane fade" id="newTab">
    <h4>新选项卡内容</h4>
    <p>这是新选项卡的内容描述。</p>
  </div>
`);

以上代码将创建一个名为 "新选项卡" 的选项卡，并在选项卡内容容器中添加相应的内容。要添加更多的选项卡，只需重复上述步骤。

希望以上解答对您有帮助！