Javascript 打开选项卡的计数-Jquery_Javascript_Jquery_Html_Tabs

Javascript 打开选项卡的计数-Jquery

javascript jquery html tabs

Javascript 打开选项卡的计数-Jquery,javascript,jquery,html,tabs,Javascript,Jquery,Html,Tabs,您能帮我找出一个div中已经打开了多少选项卡吗？因为我必须将打开的选项卡限制为2个。如果打开的选项卡计数为2，并且试图再添加一个选项卡，则需要发出警报（“超出允许的最大选项卡数，请先关闭一个选项卡”） jqueryeasyui演示函数addTab（标题、url）{ if（$（'#tt'）.tabs（'exists'，title））{ $（'#tt'）。选项卡（'选择'，标题）； }否则{ var内容=“”； $（'#tt'）。制表符（'添加'{ 标题:标题,，内容:内容,， closabl

您能帮我找出一个div中已经打开了多少选项卡吗？因为我必须将打开的选项卡限制为2个。如果打开的选项卡计数为2，并且试图再添加一个选项卡，则需要发出警报（“超出允许的最大选项卡数，请先关闭一个选项卡”）


jqueryeasyui演示
函数addTab（标题、url）{
if（$（'#tt'）.tabs（'exists'，title））{
$（'#tt'）。选项卡（'选择'，标题）；
}否则{
var内容=“”；
$（'#tt'）。制表符（'添加'{
标题:标题,，
内容:内容,，
closable:对
});
}
}

不清楚“主页”选项卡是否算作两个允许的选项卡之一，但这将满足您的需要，只需根据需要更改

（计数>2）

$（“[数据标题]”）。单击（函数（）{
var$this=$（this）；
var title=$this.data（'title'）；
var url=$this.data（'url'）；
变量计数=$（'#tt.panel'）。长度；
var$container=$（'#tt'）；
如果（$container.tabs（'exists'，title））$container.tabs（'select'，title）；
否则{
如果（计数>2）{
警报（“超过允许的最大选项卡数，先关闭一个选项卡”）；
} 
否则{
var内容=“”；
$container.tabs（'add'{
标题:标题,，
内容:内容,，
closable:对
});
}
}
});
不清楚“主页”选项卡是否算作两个允许的选项卡之一，但这将满足您的需要，只需根据需要更改（计数>2）


$（“[数据标题]”）。单击（函数（）{
var$this=$（this）；
var title=$this.data（'title'）；
var url=$this.data（'url'）；
变量计数=$（'#tt.panel'）。长度；
var$container=$（'#tt'）；
如果（$container.tabs（'exists'，title））$container.tabs（'select'，title）；
否则{
如果（计数>2）{
警报（“超过允许的最大选项卡数，先关闭一个选项卡”）；
} 
否则{
var内容=“”；
$container.tabs（'add'{
标题:标题,，
内容:内容,，
closable:对
});
}
}
});

@Jaseer，请查看上面对我的代码的更新，我已经移动了计数检查，这样就不会妨碍对已经存在的选项卡的关注。@bleeted0dThanks@Jaseer，请参阅上面对我的代码的更新，我已经移动了计数检查，这样就不会妨碍将注意力集中在已经存在的选项卡上。@高兴的D0D感谢请在下面查看我的更新和注释请在下面查看我的更新和注释
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="keywords" content="jquery,ui,easy,easyui,web">
    <meta name="description" content="easyui help you build your web page easily!">
    <title>jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
    <script>
        function addTab(title, url){


            if ($('#tt').tabs('exists', title)){
                $('#tt').tabs('select', title);
            } else {
                var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
                $('#tt').tabs('add',{
                    title:title,
                    content:content,
                    closable:true
                });
            }
        }
    </script>
</head>
<body>
    <div style="margin-bottom:10px">
        <a href="#" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')">google</a>
        <a href="#" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')">jquery</a>
        <a href="#" class="easyui-linkbutton" onclick="addTab('easyui','http://yahoo.com')">easyui</a>
    </div>
    <div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
        <div title="Home">
        </div>
    </div>
</body>
</html>