立即注册
 登录
切换到宽版
开阔云»论坛 › 群组 › 行业交流 › Web技术教程 › 使用layui框架实现点击左侧导航切换右侧内容且右侧选项 ...
Web技术教程
群主admin 天启
网页技术交流
 
发新帖
楼主: 零五零八
查看: 1450|回复: 0

[使用教程] 使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡...

[复制链接]
零五零八 发表于 2021-2-28 18:09:25 | 显示全部楼层
本帖最后由 零五零八 于 2021-2-28 18:12 编辑

1.png


用了layui框架


1.home.html主界面


  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>首页</title>
  6.         <script src="../js/jquery.js"></script>
  7.         <link rel="stylesheet" href="../layui/css/layui.css">
  8.     </head>
  9.     <body class="layui-layout-body">
  10.         <div class="layui-layout layui-layout-admin">
  11.           <!--1.头部区域-->
  12.           <div class="layui-header">
  13.             <div class="layui-logo">后台管理</div>
  14.             <!-- 头部区域（可配合layui已有的水平导航） -->
  15.             <ul class="layui-nav layui-layout-left">
  16.             </ul>
  17.             <ul class="layui-nav layui-layout-right">
  18.               <!--<li class="layui-nav-item">
  19.                 <a href="javascript:;">
  20.                   <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
  21.                   贤心
  22.                 </a>
  23.                 <dl class="layui-nav-child">
  24.                   <dd><a href="">基本资料</a></dd>
  25.                   <dd><a href="">安全设置</a></dd>
  26.                 </dl>
  27.               </li>
  28.               <li class="layui-nav-item"><a href="">退了</a></li>-->
  29.             </ul>
  30.           </div>
  31.             <!--2.左侧导航-->
  32.           <div class="layui-side layui-bg-black">
  33.             <div class="layui-side-scroll">
  34.               <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
  35.               <ul class="layui-nav layui-nav-tree"  lay-filter="test">
  36.                 <li class="layui-nav-item leftdaohang" data-url="jiaose.html" mytitle="角色管理"><a>角色管理</a></li>
  37.                 <li class="layui-nav-item leftdaohang" data-url="zhanghao.html" mytitle="账号管理"><a>账号管理</a></li>
  38.               </ul>
  39.             </div>
  40.           </div>
  41.           <!--3.右侧主体内容区-->
  42.           <div class="layui-body">
  43.               <!--tabs标签-->
  44.               <div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowclose="true">
  45.               <ul class="layui-tab-title">
  46.              <!--   <li class="layui-this">角色管理</li>-->
  47.               </ul>
  48.               <div class="layui-tab-content" style="height: 150px;">
  49.                 <!--<div class="layui-tab-item layui-show">
  50.                   1. 我个人比较喜欢卡片风格的，所以你发现又是以卡片的风格举例
  51.                   2. 删除功能适用于所有风格
  52.                 </div>-->
  53.                 <!--<div class="layui-tab-item">
  54.                     <iframe  style="width: 100%;height: 100%;" scrolling="no" src="jiaose.html" ></iframe>
  55.                 </div>-->
  56.               </div>
  57.             </div>
  58.           </div>

  60.            <!--4.底部固定区域-->
  61.           <div class="layui-footer">
  62.             <!-- 底部固定区域 -->
  63.             © layui.com - 底部固定区域
  64.           </div>
  65.         </div>
  66.         <script src="../layui/layui.all.js"></script>
  67.         <script>
  68.             layui.use('element', function(){
  69.               var $ = layui.jquery
  70.               ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
  71.               
  72.               //触发事件
  73.               var active = {
  74.                 tabAdd: function(){
  75.                   //新增一个Tab项
  76.                   var htmlurl=$(this).attr('data-url');
  77.                   var mytitle=$(this).attr('mytitle');
  78. //                  alert("触发tab增加事件："+mytitle);
  79.                   //先判断是否已经有了tab
  80.                   var arrayObj = new Array();　//创建一个数组  
  81.                       $(".layui-tab-title").find('li').each(function() {
  82.                           var y = $(this).attr("lay-id");
  83.                           arrayObj.push(y);
  84.                    });
  85. //                    alert("遍历取到的数组："+arrayObj);
  86.                     var have=$.inArray(mytitle, arrayObj);  //返回 3,
  87.                     if (have>=0) {
  88.                         //tab已有标签
  89. //                        alert("遍历的已有标签："+mytitle);
  90.                       element.tabChange('demo', mytitle); //切换到当前点击的页面
  91.                     } else{
  92.                       //没有相同tab
  93. //                      alert("遍历的没有相同tab："+mytitle);
  94.                       element.tabAdd('demo', {
  95.                         title:mytitle //用于演示
  96.                         ,content: '<iframe style="width: 100%;height: 100%;" scrolling="no" src='+htmlurl+' ></iframe>'
  97.                         ,id: mytitle //实际使用一般是规定好的id，这里以时间戳模拟下
  98.                       })
  99.                       element.tabChange('demo', mytitle); //切换到当前点击的页面
  100.                     }
  101.                 }
  102.                
  103.               };
  104.               $(".leftdaohang").click(function(){
  105.                 var type="tabAdd";
  106.                 var othis = $(this);
  107. //                var htmlurl=$(this).attr('data-url');
  108. //                var mytitle=$(this).attr('mytitle');
  109.                 active[type] ? active[type].call(this, othis) : '';
  110.               });
  111.               
  112.             });
  113.         </script>
  114.         <!--<script>
  115.             var loginurl="http://localhost:8088/user/showUser";
  116.             var mytoken=sessionStorage.getItem("gltoken");
  117.             console.log("缓存的token:"+mytoken);
  118.             netWorking();
  119.             $(".leftdaohang").click(function(){
  120.                 var htmlurl=$(this).attr('data-url');
  121.                 var mytitle=$(this).attr('mytitle');
  122.                 addTab(mytitle);
  123.                 document.getElementById("myiframe").src=htmlurl;
  124.             });
  125.             function addTab (tabname) {
  126.                  $(".layui-tab-title li").removeClass("layui-this");
  127.                 $('.layui-tab-title').append("<li>"+tabname+"</li>");
  128.                   //触发事件               
  129.             }
  130.             function netWorking () {
  131.                     $.ajax({
  132.                         type:"post",   
  133.                         url:loginurl,   
  134.                         data:{
  135.                              token:mytoken
  136.                         },
  137.                         success: function(res) {
  138.                            console.log("home请求数据1.："+res);
  139.                               var datas=JSON.parse(res);
  140.                         },
  141.                         error:function() {
  142.                             alert("失败");
  143.                        }
  144.                     });        
  145.             }
  146.         </script>-->
  147.     </body>
  148. </html>
复制代码
2.两个切换界面（jiaose.html,zhanghao.html）:
jiaose.html


  1. iaose.html

  3. <!DOCTYPE html>
  4. <html>
  5.     <head>
  6.         <meta charset="UTF-8">
  7.         <title>角色管理</title>
  8.     </head>
  9.     <body style="margin: 500px;text-align: center;background: burlywood;">
  10.         <h1>角色管理</h1>
  11.     </body>
  12. </html>
复制代码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>账号管理</title>
  6.     </head>
  7.     <body style="margin: 100px;">
  8.         <h1>账号管理</h1>
  9.     </body>
  10. </html>
复制代码




回复

举报

返回列表
快速回复 返回顶部 返回列表