在前两篇文章中，解决了创建选项卡与加载页面的问题。

问题：官方文档中使用var active{}触发事件，不知道为啥我的不行（才入门第二天..小声BB

所以我使用了element.on(‘nav(leftList)’, function(e) {})触发事件，正是由于该方法，在点击导航时，回无限创建新的选项卡。

解决：加一个判断即可。查询该lay-id的<li>的长度，如果大于0也就是存在该tab，直接切换。否则创建。

代码如下：

<script type="text/javascript">
		layui.use('element', function() {
			var $ = layui.jquery;
			var element = layui.element;
			//触发事件
			element.on('nav(leftList)', function(e) {
				//取值
				var con = e.text();
				var tabId = e.attr("id");
				var url = e.attr("data-url");
				console.log('log:' + tabId)
				
				var isActive = $('.layui-tab-title').find("li[lay-id=" + tabId + "]");
				if (isActive.length > 0) {
					//存在当前tab
					element.tabChange('tabDemo',tabId)
				}
				else{
					//新增一个Tab项
					element.tabAdd('tabDemo', {
						title : con,
						content : '<iframe src="/admin/'+url+'" style="width:100%;height:100%;" frameborder="0" ></iframe>',
						id : tabId
					})
				}
				
			})
		});
	</script>

打赏

微信扫一扫，打赏作者吧～