您能帮我查一下 div 中已经打开了多少个选项卡吗，因为我必须将打开的选项卡限制为 2 个。如果打开的选项卡计数为 2 并且尝试再添加一个选项卡，则需要发出警报 ('超出允许的最大选项卡数，请先关闭一个选项卡')？
<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>
最佳答案
尚不清楚主页选项卡是否算作 2 个允许的选项卡之一，但这将满足您的需要，只需根据需要更改 (count > 2) 即可。
$('[data-title]').click(function() {
var $this = $(this);
var title = $this.data('title');
var url = $this.data('url');
var count = $('#tt .panel').length;
var $container = $('#tt');
if ($container.tabs('exists', title)) $container.tabs('select', title);
else {
if (count > 2) {
alert('maximum allowed tabs exceed, close one tab first');
}
else {
var content = '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>';
$container.tabs('add', {
title: title,
content: content,
closable: true
});
}
}
});<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>
<div style="margin-bottom:10px">
<a href="#" class="easyui-linkbutton" data-title="google" data-url="http://www.google.com">google</a>
<a href="#" class="easyui-linkbutton" data-title="jquery" data-url="http://jquery.com/">jquery</a>
<a href="#" class="easyui-linkbutton" data-title="easyui" data-url="http://yahoo.com">easyui</a>
</div>
<div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
<div title="Home">
</div>
</div>关于javascript - 打开选项卡的计数 - Jquery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34542525/