Question

我到处寻找这个。链接如何指定要加载的选项卡和网址的标题？类似的东西：

<a href="#" onclick="createNewTab('my tab title','','externalfile.html')">Create new tab dynamically</a>

我该如何关闭标签？

我找到的最近的是http://www.dhtmlgoodies.com/scripts/tab-view/tab-view.html但是id更喜欢使用jquery

由于

更新

我找到了jeasyui，看起来很简单，但我遇到了一些问题。继承我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="height: 100%; overflow: hidden;">   
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
    <link rel="stylesheet" type="text/css" href="jeasyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jeasyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">

    <script type="text/javascript" src="jeasyui/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="jeasyui/jquery.easyui.min.js"></script>

<script type="text/javascript">
            function open1(title,plugin){
                if ($('#tt').tabs('exists',title)){
                    $('#tt').tabs('select', title);
                } else {
                    $('#tt').tabs('add',{
                        title:title,
                        href:plugin,
                        closable:true,
                        extractor:function(data){
                            var tmp = $('<div></div>').html(data);
                            data = tmp.find('#content').html();
                            tmp.remove();
                            return data;
                        }
                    });
                }
            }
        </script>
    </head>

    <body class="easyui-layout" style="text-align:left">
        <div region="north" border="false" style="background:#666;text-align:center">
                        <div id="header-inner">
                <table cellpadding="0" cellspacing="0" style="width:100%;">
                    <tr>
                        <td rowspan="2" style="width:20px;">
                        </td>
                        <td style="height:52px;">
                            <div style="color:#fff;font-size:22px;font-weight:bold;">

                                <a href="/index.php" style="color:#fff;font-size:22px;font-weight:bold;text-decoration:none">TEST</a>
                            </div>
                                                </td>
                        <td style="padding-right:5px;text-align:right;vertical-align:bottom;">
                        </td>
                    </tr>
                </table>
            </div>

        </div>

        <div region="west" border="false" split="true" title="Menu" style="width:250px;padding:5px;">
            <ul class="easyui-tree">
                <li iconCls="icon-base"><span>Base</span><ul>
                <li iconCls="icon-gears"><a href="#" onclick="open1('test','demo.php')">test</a></li>
                <li iconCls="icon-gears"><a href="#" onclick="open1('test1','demo.php')">test1</a></li>
                <li iconCls="icon-gears"><a href="#" onclick="open1('test2','demo.php')">test2</a></li>
                <li iconCls="icon-gears"><a href="#" onclick="open1('test3','demo.php')">test3</a></li>
            </ul>
        </div>

        <div region="east" border="false" split="true" title="Live " style="width:250px;padding:5px;">
            <h1>Hello</h1>
        </div>

        <div region="center" border="false">
            <div id="tt" class="easyui-tabs" fit="true" border="false" plain="true">
                <div title="Welcome" href="dashbord.php"></div>
            </div>
        </div>
    </body>
</html>

它添加了一个带标题的新标签，但它没有加载网址（demo.php）

Answer 1

使用jQuery UI !!!

http://jqueryui.com/demos/tabs/#manipulation

链接广告新的jquery选项卡并指定要加载的标签标题和ajax网址

更新

1 个答案: