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

Question

如何将内容附加到动态创建的选项卡？如果我用那个 id 留下一个 div，那会一团糟。

1. 第三个标签内容出现在第一个标签中
2. 在我单击复选框后，它看起来不错，但在第三次单击（再次隐藏并再次显示）时，第三个选项卡内容会消失。

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

直播：http: //jsfiddle.net/dSxby/

html:

<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>

jQuery：

 $(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');
          }
      });
});

Answer 1

Style the id="tabs-3" to display:none;: http://jsfiddle.net/dSxby/1/

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