绑定选项click方法，传递title值，如果mainContent的值匹配到该title，就不添加tab，否则添加
<div id="tabsMenu">
<a href="javascript:void(0);" title="tab1" rel="/tab1">tab1</a>
<a href="javascript:void(0);" title="tab2" rel="/tab2">tab2</a>
<a href="javascript:void(0);" title="tab3" rel="/tab3">tab3</a>
</div>
<div id="mainContent"></div>
js:
$("#tabsMenu a")click(function(){
var title = $(this)attr("title");
var url = $(this)attr("rel");
var exist = $('#tabs')tabs('exists', title); //判断是否存在tabs选项卡了，返回false或true
if (!exist && url != undefined) {
$('#tabs')tabs('add',{
title:title,
content:"<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>",//这个地方具体还是得结合项目，创建新节点
closable:true,
icon:"icon-table"
});
}
else {
$('#tabs')tabs('select', title);//匹配到title，就显示这个窗口
}
})
大致是这样，结合easyUI的tabs选项卡api文档和自己项目调整吧
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="/jquery-183minjs"></script>
<style type="text/css">
box{
width: 80%;
height: 300px;
border: solid 1px #eeeeee;
margin: 0 auto;
}
box tab_header ul{
margin: 0;
padding: 0;
width: 100%;
height: 50px;
display: flex;
line-height: 50px;
justify-content: space-between;
border-bottom: solid 1px #eeeeee;
}
box tab_header ul li{
width: 33%;
border-right: solid 1px #eeeeee;
list-style: none;
text-align: center;
}
current{
background-color: #eeeeee;
color: #08BECE;
}
hide{
display: none;
}
</style>
</head>
<body>
<div class="box">
<!--这个是tab切换标题-->
<div class="tab_header">
<ul>
<li class="current">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<!--这个是要显示的内容部分-->
<div class="tab_content">
<div>tab1的内容</div>
<div class="hide">tab2的内容</div>
<div class="hide">tab3的内容</div>
</div>
</div>
</div>
<script type="text/javascript">
var $asd=$("tab_header ul li");
$asdclick(function(){
$(this)addClass("current")siblings()removeClass("current");
var $index=$asdindex(this);
var $content=$("tab_content div");
$contenteq($index)show()siblings()hide();
});
</script>
</body>
</html>
这个是效果图
<span id="myItem">选项卡</span>
<a id="myContent">这里是要显示在选项卡的内容</a>
js：
jQuery("#myContent")click(function(){
var myContent = jQuery("#myContent")val();
//把a标签的内容显示在选项卡中
jQuery("#myItem")html(myContent) ;
//把a标签的内容显示在选项卡的title属性中
jQuery("#myItem")attr("title",myContent) ;
});
不知道我理解的对不对
以上就是关于jquery ui tabs判断已经存在全部的内容，包括:jquery ui tabs判断已经存在、jquery怎么实现tab切换、jquery如何获取动态添加的A标签中的文本等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）