<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>按钮控制tab并跳转</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body> <div class="layui-tab" lay-filter="demo" lay-allowclose="true" > <ul class="layui-tab-title" id="navlink"> <li class="layui-this" lay-id="11">网站设置</li> <li lay-id="22">用户管理</li> <li lay-id="33">权限分配</li> <li lay-id="44">商品管理</li> <li lay-id="55">订单管理</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show">内容1</div> <div class="layui-tab-item">内容2</div> <div class="layui-tab-item">内容3</div> <div class="layui-tab-item">内容4</div> <div class="layui-tab-item">内容5</div> </div> </div> <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="adddemo" style="margin-right: 10px;"> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;">默认展开</a> <dl class="layui-nav-child"> <dd> <a href="javascript:;" >选项一</a> </dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;" >社区</a> </li> <li class="layui-nav-item"> <a href="javascript:;" >111区</a> </li> <li class="layui-nav-item"> <a href="javascript:;" >333区</a> </li> </ul> <script src="layui/layui.js"></script><script>layui.use('element', function(){ var $ = layui.jquery ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块 var tabUrl=[{ "title": "333区", "src": "html/change-user.html", "pid":000},{ "title": "社区", "src": "html/add-user.html", "pid":111},{ "title": "111区", "src": "html/bill.html", "pid":222},{ "title": "选项一", "src": "html/lanmu.html", "pid":333}] ; //地址 hash的匹配 var layid = location.hash.replace(/^#demo=/, ''); element.tabChange('demo', layid); element.on('tab(demo)', function(elem){ location.hash = $(this).attr('lay-id'); }); element.on('nav(adddemo)', function(elem){ var othis = $(this); //console.log(othis.context.innerText); //得到当前点击的DOM对象//console.log(elem); var ul_li=$('#navlink li'); var mun=false;//var this_title=othis.context.innerText; for(var i=0;i<ul_li.length;i++){(function(org){ if(othis.context.innerText==ul_li[i].getAttribute('lay-id')){ element.tabChange('demo', othis.context.innerText); return mun=true; }else if(org+1== ul_li.length && mun==false){ addtab(); } })(i); function addtab (){ var tabUrl_this_src; for(var j=0;j<tabUrl.length;j++){ console.log(tabUrl[j].title+' + '+othis.context.innerText); if( tabUrl[j].title==othis.context.innerText ){ tabUrl_this_src=tabUrl[j].src; console.log(tabUrl_this_src); } } element.tabAdd('demo', { title: othis.context.innerText //选项卡的标题 ,content: '<iframe src="'+tabUrl_this_src+'" class="larry-iframe" name="ifr_0" frameborder="0" id="iframepage" width="100%" height="100%" > </iframe>' ,id: othis.context.innerText //选项卡标题的lay-id属性值 }); element.tabChange('demo', othis.context.innerText); console.log("333 -"+tabUrl_this_src); } } }); });</script> </body></html>
添加回答
举报
0/150
提交
取消