行使layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟从变革的结果
|
副问题[/!--empirenews.page--]
用了layui框架 1.home.html主界面： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首页</title> <script src=http://www.jb51.net/html5/"../js/jquery.js"></script> <link rel="stylesheet" href=http://www.jb51.net/html5/"../layui/css/layui.css"> </head> <body class="layui-layout-body"> <div class="layui-layout layui-layout-admin"> <!--1.头部地区--> <div class="layui-header"> <div class="layui-logo">靠山打点</div> <!-- 头部地区（可共同layui已有的程度导航） --> <ul class="layui-nav layui-layout-left"> </ul> <ul class="layui-nav layui-layout-right"> <!--<li class="layui-nav-item"> <a href="javascript:;"> <img src=http://www.jb51.net/html5/"http:/t.cn/RCzsdCq" class="layui-nav-img"> 贤心 </a> <dl class="layui-nav-child"> <dd><a href=http://www.jb51.net/html5/"">根基资料</a></dd> <dd><a href=http://www.jb51.net/html5/"">安详配置</a></dd> </dl> </li> <li class="layui-nav-item"><a href=http://www.jb51.net/html5/"">退了</a></li>--> </ul> </div> <!--2.左侧导航--> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧导航地区（可共同layui已有的垂直导航） --> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li class="layui-nav-item leftdaohang" data-url=http://www.jb51.net/html5/"jiaose.html" mytitle="脚色打点"><a>脚色打点</a></li> <li class="layui-nav-item leftdaohang" data-url="zhanghao.html" mytitle="账号打点"><a>账号打点</a></li> </ul> </div> </div> <!--3.右侧主体内容区--> <div class="layui-body"> <!--tabs标签--> <div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowclose="true"> <ul class="layui-tab-title"> <!-- <li class="layui-this">脚色打点</li>--> </ul> <div class="layui-tab-content" style="height: 150px;"> <!--<div class="layui-tab-item layui-show"> 1. 我小我私人较量喜好卡片气魄威风凛凛的，以是你发明又是以卡片的气魄威风凛凛举例 2. 删除成果合用于全部气魄威风凛凛 </div>--> <!--<div class="layui-tab-item"> <iframe style="width: 100%;height: 100%;" scrolling="no" src=http://www.jb51.net/html5/"jiaose.html" ></iframe> </div>--> </div> </div> </div> <!--4.底部牢靠地区--> <div class="layui-footer"> <!-- 底部牢靠地区 --> © layui.com - 底部牢靠地区 </div> </div> <script src=http://www.jb51.net/html5/"../layui/layui.all.js"></script> <script> layui.use('element', function(){ var $ = layui.jquery ,element = layui.element; //Tab的切换成果，切换变乱监听等，必要依靠element模块 //触发变乱 var active = { tabAdd: function(){ //新增一个Tab项 var htmlurl=$(this).attr('data-url'); var mytitle=$(this).attr('mytitle'); // alert("触发tab增进变乱："+mytitle); //先判定是否已经有了tab var arrayObj = new Array(); //建设一个数组 $(".layui-tab-title").find('li').each(function() { var y = $(this).attr("lay-id"); arrayObj.push(y); }); // alert("遍历取到的数组："+arrayObj); var have=$.inArray(mytitle, arrayObj); //返回 3, if (have>=0) { //tab已有标签 // alert("遍历的已有标签："+mytitle); element.tabChange('demo', mytitle); //切换到当前点击的页面 } else{ //没有沟通tab // alert("遍历的没有沟通tab："+mytitle); element.tabAdd('demo', { title:mytitle //用于演示 ,content: '<iframe style="width: 100%;height: 100%;" scrolling="no" src='http://www.jb51.net/html5/+htmlurl+' ></iframe>' ,id: mytitle //现实行使一样平常是划定好的id，这里以时刻戳模仿下 }) element.tabChange('demo', mytitle); //切换到当前点击的页面 } } }; $(".leftdaohang").click(function(){ var type="tabAdd"; var othis = $(this); // var htmlurl=$(this).attr('data-url'); // var mytitle=$(this).attr('mytitle'); active[type] ? active[type].call(this, othis) : ''; }); }); </script> <!--<script> var loginurl=":8088/user/showUser"; var mytoken=sessionStorage.getItem("gltoken"); console.log("缓存的token:"+mytoken); netWorking(); $(".leftdaohang").click(function(){ var htmlurl=$(this).attr('data-url'); var mytitle=$(this).attr('mytitle'); addTab(mytitle); document.getElementById("myiframe").src=htmlurl; }); function addTab (tabname) { $(".layui-tab-title li").removeClass("layui-this"); $('.layui-tab-title').append("<li>"+tabname+"</li>"); //触发变乱 } function netWorking () { $.ajax({ type:"post", url:loginurl, data:{ token:mytoken }, success: function(res) { console.log("home哀求数据1.："+res); var datas=JSON.parse(res); }, error:function() { alert("失败"); } }); } </script>--> </body> </html> 2.两个切换界面（jiaose.html,zhanghao.html）: jiaose.html （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
