使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果


Posted in HTML / CSS onNovember 10, 2020

使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果

用了layui框架

1.home.html主界面:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
        <script src="../js/jquery.js"></script>
        <link rel="stylesheet" href="../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://t.cn/RCzsdCq" class="layui-nav-img">
                  贤心
                </a>
                <dl class="layui-nav-child">
                  <dd><a href="">基本资料</a></dd>
                  <dd><a href="">安全设置</a></dd>
                </dl>
              </li>
              <li class="layui-nav-item"><a href="">退了</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="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="jiaose.html" ></iframe>
                </div>-->
              </div>
            </div> 
          </div>

           <!--4.底部固定区域-->
          <div class="layui-footer">
            <!-- 底部固定区域 -->
            © layui.com - 底部固定区域
          </div>
        </div>
        <script src="../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='+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="http://localhost: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

iaose.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>角色管理</title>
    </head>
    <body style="margin: 500px;text-align: center;background: burlywood;">
        <h1>角色管理</h1>
    </body>
</html>

zhanghao.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>账号管理</title>
    </head>
    <body style="margin: 100px;">
        <h1>账号管理</h1>
    </body>
</html>

到此这篇关于layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果的文章就介绍到这了,更多相关html5实现点击左侧导航切换右侧内容内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
Nov 05 HTML / CSS
网页切图的CSS和布局经验与要点
Apr 09 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
css3中less实现文字长阴影(long shadow)
Apr 24 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
May 27 HTML / CSS
突破canvas语法限制 让他支持链式语法
Dec 24 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
Sep 03 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
浅析HTML5:'data-'属性的作用
Jan 23 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
Sep 09 HTML / CSS
Html5页面获取微信公众号的openid的方法
May 12 HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
May 25 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 #HTML / CSS
萌新HTML5 入门指南(二)
Nov 09 #HTML / CSS
萌新的HTML5 入门指南
Nov 06 #HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
Nov 04 #HTML / CSS
浅析HTML5 meta viewport参数
Oct 28 #HTML / CSS
一个基于canvas的移动端图片编辑器的实现
Oct 28 #HTML / CSS
详解HTML5布局和HTML5标签
Oct 26 #HTML / CSS
You might like
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
js setattribute批量设置css样式
2009/11/26 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
js获取form的方法
2015/05/06 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
Python SQL查询并生成json文件操作示例
2018/08/17 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
大学生预备党员自我评价分享
2013/11/16 职场文书
打架检讨书300字
2014/02/02 职场文书
会计专业应届生自荐信
2014/02/07 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
门面房租房协议书
2014/12/01 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书