layui的選項卡添加與切換

//新增選項卡的js
function changetab(filter,title,url,id){
					if(!filter){
						return;
					}
					var isTab = !Boolean($('[lay-filter="layadmin-layout-tab"]').find('.layui-tab-title li[lay-id="'+id+'"]').length)
					if(isTab){
						element.tabAdd(filter,{
							title:title,
							content:'<iframe src=' + url +' width="100%" style="min-height: 450px" frameborder="0" scrolling="auto" onload="setIframeHeight(this)"></iframe>',
							id:id
						})
					}
					element.tabChange(filter,id);
				}



//js內容，主要是選項卡添加和切換，監聽頂部導航欄切換左側導航欄
<script>
			//JavaScript代碼區域
			var element;
			var $;
			var layer;
			layui.use(['element', 'jquery'], function() {
				element = layui.element;
				$ = layui.jquery;
				layer = layui.layer;
				//監聽左側導航欄,新增tab選項卡
				element.on('nav(test1)', function(elem) {
					layer.msg(elem.text());
					var filter = 'layadmin-layout-tab'
					var title = $(this).text();
					var url = $(this).data('url')
					var id = $(this).attr('lay-id')
					if (url && id) {
						changetab(filter, title, url, id);
					}
				});
				//監聽頂部導航欄,切換左側導航欄
				element.on('nav(menu-top)', function(a) {
					var content = a.attr('cid');
					$('.item:not(.' + content + ')').css('display', 'none');
					$('.item.' + content).css('display', 'block');
				});
				var initCid = $('[lay-filter="menu-top"] .layui-this a').attr('cid');
				$('.item.' + initCid).css('display', 'block');
				//監聽選項卡切換
				element.on('tab(layadmin-layout-tab)', function(data) {
					if (data.elem.context.attributes != undefined) {
						var id = data.elem.context.attributes[0].nodeValue;

						// var i=8;
						// id=id.substring(0,i);
						console.log(id)
						layui.each($(".layui-nav-child"), function() {
							$(this).find("dd").removeClass("layui-this");
						});
						$('.' + id).addClass("layui-this");
					}
				});
			});
		</script>