动态添加选项卡，单击按钮

debugcn 发表于 Dev

独自的

HTML代码：

<div id="container-1">
    <ul>
        <li><a href="#fragment-1">List</a></li>
        <li><a href="#fragment-2">List</a></li>
        <li><a href="#fragment-3">List</a></li>
    </ul>
    <div id="fragment-1">one</div>
    <div id="fragment-2">two</div>
    <div id="fragment-3">three</div>
</div>
<button id="add_tab">Add Tab</button>

我想再添加一个标签“ fragment-4”，该标签位于onclick事件的按钮上。此标签div不足<div id="container-1">。我正在使用以下java脚本：

$(document).ready(function() {
        var tabs = $("#container-1").tabs();
            var tabCounter = 1;

        $('#add_tab').click( function(){
            var ul = tabs.find( "ul" );
            $( "<li><a href='#fragment-4'>Call Detials</a></li>" ).appendTo( ul );
            tabs.tabs( "refresh" );
            tabs.tabs('select', 1);
        });
  });

使用此功能，我可以动态获取选项卡，但不能动态获取在该选项卡中写入的内容。所以请建议我该怎么办？

米希克

演示版

$(document).ready(function() {
    var tabs = $("#container-1").tabs();
    var tabCounter = 1;

    $('#add_tab').click( function(){
        var ul = tabs.find( "ul" );
        var current_idx = ul.find("li").length + 1; // Get correct index for id
        $("<li><a href='#fragment-" + current_idx + "'>Call Details</a></li>" ).appendTo( ul );
        tabs.append( $('#callDetail') );
        tabs.tabs("refresh");
        tabs.tabs("select", 1);
    });
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。