• QQ登录

    只需要一步,快速开始

    登录 立即注册
  • http://www.wzsvip.net/product/yun
    查看: 354|回复: 0

    layui引入 tab选项卡切换多页面tab切换

    [复制链接]
    发表于 2021-10-15 16:16:30 | 显示全部楼层 |阅读模式
    这里主要介绍如何在页面中引入tab切换
    1. /**
    2. *  css部分代码
    3. */
    4. <link rel="stylesheet" type="text/css" href="js/common/UILab/layui2.4.5/css/layui.css" />

    5. /**
    6. *  html
    7. */
    8. <div class="layui-tab" lay-filter="all">
    9.   <ul class="layui-tab-title">
    10.     <li class="layui-this">网站设置</li>
    11.     <li>用户管理</li>
    12.     <li>权限分配</li>
    13.     <li>商品管理</li>
    14.     <li>订单管理</li>
    15.   </ul>
    16.   <div class="layui-tab-content">
    17.     <div class="layui-tab-item layui-show">内容1</div>
    18.     <div class="layui-tab-item">内容2</div>
    19.     <div class="layui-tab-item">内容3</div>
    20.     <div class="layui-tab-item">内容4</div>
    21.     <div class="layui-tab-item">内容5</div>
    22.   </div>
    23. </div>

    24. /**
    25. *  js
    26. */
    27. <script type="text/javascript" src="js/common/UILab/layui2.4.5/layui.js"></script>
    28. <script>
    29. layui.use('element', function(){
    30.   var $ = layui.jquery;
    31.   var element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块
    32.   element.on('tab(prev)', function(data){});
    33.   element.on('tab(all)', function(data){
    34.     if(data.index == 0){
    35.       console.log("内容1");
    36.     } else if(data.index == 1){
    37.       console.log("内容2");
    38.     }   
    39.   });
    40. });
    41. </script>
    复制代码

    js用这个比较简洁
    1. <script>
    2. //注意:选项卡 依赖 element 模块,否则无法进行功能性操作
    3. layui.use('element', function(){
    4.   var element = layui.element;
    5. });
    6. </script>
    复制代码







    上一篇:返回顶部简易代码
    下一篇:layui模板layuiadmin模板后台iframe单页模板layim整套源码

    手机版|网络信息须知|本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权|易云资源网 ( 黔ICP备15016750号-8 ) Copyright©2016-2021 YSVIP All Rights Reserved.|Sitemap

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