如何使用jquery向动态创建的选项卡添加内容

如何将内容附加到动态创建的选项卡？ 如果我带着那个身份证离开一个部门，那就乱七八糟了

第三个选项卡内容出现在第一个选项卡中

单击复选框后，它看起来不错，但在第三次单击时 （再次隐藏并显示）第三个选项卡内容显示

如何按下复选框动态显示和隐藏选项卡及其内容

现场：

html:

将

id=“tabs-3”

设置为

显示：无：


表3内容

您可以使用jquery.append函数动态添加选项卡。更快的答案…只需编写即可。谢谢，但它不会；在标签3内容发布之前，我在复选框上再点击几下就不行了
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">tab 1</a>
        </li>
        <li><a href="#tabs-2">tab 2</a>
        </li>
    </ul>
    <div id="tabs-1">
        <table class="form-table">
            <tr>
                <th scope="row">
                    <label for="dp_add_license">Add tab</label>
                </th>
                <td>
                    <input type="checkbox" id="dp_add_license" name="dp_add_license" value="1"
                    />
                </td>
            </tr>
        </table>
    </div>
    <div id="tabs-2">
        <p>tab  2 content.</p>
    </div>
    <div id="tabs-3">
        <p>tab 3 content.</p>
    </div>
</div>

 $(document).ready(function() {
    $("#tabs").tabs();
      $('#dp_add_license').click(function() {
          if ($(this).is(':checked')) {
              $("#tabs").tabs("add", '#tabs-3', "tab 3");
          } else {
              $("#tabs").tabs("remove", '#tabs-3');
          }
      });
});

<div id="tabs-3" style='display:none;'>
    <p>tab 3 content.</p>
</div>