<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>按鈕控制tab并跳轉(zhuǎn)</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">網(wǎng)站設(shè)置</li> <li lay-id="22">用戶管理</li> <li lay-id="33">權(quán)限分配</li> <li lay-id="44">商品管理</li> <li lay-id="55">訂單管理</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show">內(nèi)容1</div> <div class="layui-tab-item">內(nèi)容2</div> <div class="layui-tab-item">內(nèi)容3</div> <div class="layui-tab-item">內(nèi)容4</div> <div class="layui-tab-item">內(nèi)容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:;">默認(rèn)展開</a> <dl class="layui-nav-child"> <dd> <a href="javascript:;" >選項(xiàng)一</a> </dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;" >社區(qū)</a> </li> <li class="layui-nav-item"> <a href="javascript:;" >111區(qū)</a> </li> <li class="layui-nav-item"> <a href="javascript:;" >333區(qū)</a> </li> </ul> <script src="layui/layui.js"></script><script>layui.use('element', function(){? var $ = layui.jquery? ,element = layui.element; //Tab的切換功能，切換事件監(jiān)聽等，需要依賴element模塊??var tabUrl=[{ "title": "333區(qū)", "src": "html/change-user.html", "pid":000},{ "title": "社區(qū)", "src": "html/add-user.html", "pid":111},{ "title": "111區(qū)", "src": "html/bill.html", "pid":222},{ "title": "選項(xiàng)一", "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); //得到當(dāng)前點(diǎn)擊的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 //選項(xiàng)卡的標(biāo)題 ? ? ? ?,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 //選項(xiàng)卡標(biāo)題的lay-id屬性值? ? ? });? element.tabChange('demo', othis.context.innerText); console.log("333 ? ?-"+tabUrl_this_src);? }? ? ? }?? ?});??????});</script> </body></html>
layui爬坑--為什么第二次if條件判斷的時(shí)候得到的值一直是undifined？
qq_琥珀的眼淚_0
2018-04-10 08:55:29