在前两篇文章中,解决了创建选项卡与加载页面的问题。
问题:官方文档中使用var active{}触发事件,不知道为啥我的不行(才入门第二天..小声BB
所以我使用了element.on(‘nav(leftList)’, function(e) {})触发事件,正是由于该方法,在点击导航时,回无限创建新的选项卡。
解决:加一个判断即可。查询该lay-id的<li>的长度,如果大于0也就是存在该tab,直接切换。否则创建。
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<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> |