用了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实现点击左侧导航切换右侧内容内容请搜索Devmax以前的文章或继续浏览下面的相关文章,希望大家以后多多支持Devmax!

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

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

    这篇文章主要介绍了基于HTML5实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  2. ios – 如何调整标签栏徽章位置?

    我在标签栏上显示徽章,但是当数字增加时,它会转到标签栏项目,如图所示我想稍微向左移动徽章视图,使其适合选定的选项卡image.i尝试如here所述,但没有运气.那么有没有办法调整徽章视图位置?任何帮助将不胜感激.解决方法我发现Kateryna的答案对于让我走上正轨非常有用,但我必须稍微更新一下:请注意,选项卡整数不是零索引,因此第一个选项卡将是数字1,第二个选项卡将是2,等等.

  3. ios – UITabBarController – Child(Tab)ViewControllers的不正确和不一致的边界

    我有一个带有两个选项卡的UITabBarController.每个选项卡都是UITableViewController.当UITabBarController出现时,两个选项卡视图都有不正确的边界.第一个选项卡正确位于导航栏下方,但延伸到底部的选项卡栏下方.第二个选项卡是另一种方式,从导航栏下方开始,但在底部的选项卡栏之前正确停止.我正在创建和呈现TabBarController,如下所示:然后在

  4. xcode – 隐藏或丢失构建阶段选项卡

    ..构建阶段选项卡.如何使用工具栏中的“构建阶段”选项卡显示布局,并将其保存以用于我的项目?顺便说一句,我使用XCode3.2可能是版本限制?解决方法听起来这些教程适用于Xcode4.对于您的版本,如果您在侧边栏中打开目标,则应该有一些组.这些是你的构建阶段.只需将库拖到类似“LinkExecutable”之类的库中,或单击复选框将其添加到目标,它应该自动进入.

  5. ios – 单击UITabBarController时的自定义操作

    我有一个标签栏控制器,它添加了四个导航控制器.导航控制器在选项卡栏控制器中显示为选项卡栏项目.现在我想在标签栏中添加第五个按钮,它不会打开另一个视图,但会触发一些自定义代码.我想在单击该标签栏项目时显示重叠的“共享菜单”,无论用户在哪四个页面中.我怎样才能做到这一点?

  6. iOS 7.1问题 – Tabbar调整大小不起作用

    自从我更新到iOS7.1后,选项卡的大小调整不再起作用:此代码导致选项卡向上移动,但下方有一些空白区域.任何人都可以解决这个问题?

  7. 缺少ios开发签名身份(null)

    当我尝试生成ipa文件时,我收到此错误.无法解决.请帮我解决此错误:我有自己的帐户,在我的钥匙链中访问它的鞋子像这样:我没有使用新的Mac,我已经创建了ipa.Day.但今天无法做到.我也有.cer个人资料.它有效解决方法这是Apple发表的声明.Thanksforbringingthistotheattentionofthecommunityandapologiesfortheissuesyou

  8. ios – 存档期间不存在Xcode环境变量

    我有一个具有TestFlight构建方案的iOS应用程序.在此方案中,我在“运行”选项卡中设置了一个称为TESTFLIGHT的环境变量,值为1.此外,在构建方案的“配置文件”选项卡中,它已选中“使用RUn操作的参数和变量”选项,并在列表中看到相应的EV.当从Xcode运行应用程序时,这可以正常工作,但是当我在存储设备上运行应用程序时,环境变量TESTFLIGHT不存在.我的问题是有一个我在这里缺少的选项/方案选项卡?

  9. ios – 如何正确地从一个Tab到另一个Tab的数据

    当我通过模拟器中的段落时,我在控制台中收到以下消息:任何帮助将不胜感激!).您可以尝试以下方法:

  10. ios – 使用AFNetworking未共享扩展的成功/失败回调

    我有一个共享扩展中的AFNetworking的问题.在didSelectPost中,我打电话:[AuthClientsharedClient]使用单例模式获取具有背景标识符的NSURLSessionConfiguration的AFHTTPSessionManager实例.但是,无论是成功还是失败的回调都被调用,它将无限期挂起,直到扩展被杀死.有趣的是,HTTP请求在服务器端完成;完成从未被调用.解

随机推荐

  1. 微信小程序canvas实现水平、垂直居中效果

    这篇文章主要介绍了小程序中canvas实现水平、垂直居中效果,本文图文实例代码相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. H5最强接口之canvas实现动态图形功能

    这篇文章主要介绍了H5最强接口之canvas实现动态图形功能,需要的朋友可以参考下

  4. Canvas高级路径操作之拖拽对象的实现

    这篇文章主要介绍了Canvas高级路径操作之拖拽对象的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. html5视频自动横过来自适应页面且点击播放功能的实现

    这篇文章主要介绍了h5视频自动横过来自适应页面且点击播放,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. canvas像素点操作之视频绿幕抠图

    这篇文章主要介绍了canvas像素点操作之视频绿幕抠图的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  9. canvas绘制视频封面的方法

    这篇文章主要介绍了canvas绘制视频封面的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

返回
顶部