<!doctype html>
<html lang="en">
    <head>
        <title>jQuery UI Tabs - Default functionality</title>
        <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
        <script type="text/javascript" src="../../jquery-1.3.2.js">
        </script>
        <script type="text/javascript" src="../../ui/ui.core.js">
        </script>
        <script type="text/javascript" src="../../ui/ui.tabs.js">
        </script>
        <link type="text/css" href="../demos.css" rel="stylesheet" />
        <script type="text/javascript">
          var index  = 0;
            $(function(){
                $("#tabs").tabs();
$('#createtab1').bind("click",createNewTab);
$('#createtab2').bind("click",createNewTab);
            });
            
            function createNewTab(){
var title =index +1;
title ="#"+title; 
                $('#tabs').tabs("add", "#insertcontext", title);
                $('#insertcontext').show();
index += 1;
if(index >=3){
$('#createtab1').unbind('click',createNewTab);
$('#createtab2').unbind('click',createNewTab);
}
            }

function removeTab(){
var tabs = $('#tabs').tabs();
var selected = tabs.tabs('option', 'selected'); // => 0
alert(selected);
//这边有问题 tabs.tabs("remove",selected);
}
        </script>
    </head>
    <body>
        <div class="demo">
            <div id="tabs">
                <ul id="tabul">
                    <li>
                        <a href="#tabs-1">Nunc tincidunt</a>
                    </li>
                    <li>
                        <a href="#tabs-2">Proin dolor</a>
                    </li>
                </ul>
                <div id="tabs-1">
                    <p>
                        Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
                    </p>
                    <a id="createtab1" href="#">add new tab</a>
                </div>
                <div id="tabs-2">
                    <p>
                        Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.
                    </p>
<a id="createtab2" href="#">add new tab</a>
                </div>
                <div id="insertcontext" style="display:none">
                    <form>
                        <table>
                            <tr>
                                <td>
                                  input your name:
                                </td>
                                <td>
                                   <input type="text" name="name" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                 input your password:
                                </td>
                                <td>
                                  <input type="password" namw="pwd" />
                                </td>
                            </tr>
                           <hr/>
   <br/>
    <tr>
                                <td>
                                 <input type="submit" value="submit" onclick="removeTab()" />
                                </td>
                                <td>
                                 <input type="reset" value="reset" />
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </div><!-- End demo -->
    </body>
</html>

以上代码必须放在query-ui-1.7.2.custom\development-bundle\demos\tabs下面才能正确跑
有前二个tab,tab里面有一个超链接, 点击一次,产生一个新的tab , 最多只能产生三个tab ,超过时单击失效
在产生的tab页里面有sumbit按钮,单击一下,本tab就被删除,删除后可重新单击前二个tab的超链接,产生新的tab页
麻烦大家看看