svip

这里主要介绍如何在页面中引入tab切换

1. /**
   
2. *  css部分代码
   
3. */
   
4. <link rel="stylesheet" type="text/css" href="js/common/UILab/layui2.4.5/css/layui.css" />
   
5. 
   
6. /**
   
7. *  html
   
8. */
   
9. <div class="layui-tab" lay-filter="all">
   
10.   <ul class="layui-tab-title">
    
11.     <li class="layui-this">网站设置</li>
    
12.     <li>用户管理</li>
    
13.     <li>权限分配</li>
    
14.     <li>商品管理</li>
    
15.     <li>订单管理</li>
    
16.   </ul>
    
17.   <div class="layui-tab-content">
    
18.     <div class="layui-tab-item layui-show">内容1</div>
    
19.     <div class="layui-tab-item">内容2</div>
    
20.     <div class="layui-tab-item">内容3</div>
    
21.     <div class="layui-tab-item">内容4</div>
    
22.     <div class="layui-tab-item">内容5</div>
    
23.   </div>
    
24. </div>
    
25. 
    
26. /**
    
27. *  js
    
28. */
    
29. <script type="text/javascript" src="js/common/UILab/layui2.4.5/layui.js"></script>
    
30. <script>
    
31. layui.use('element', function(){
    
32.   var $ = layui.jquery;
    
33.   var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
    
34.   element.on('tab(prev)', function(data){});
    
35.   element.on('tab(all)', function(data){
    
36.     if(data.index == 0){
    
37.       console.log("内容1");
    
38.     } else if(data.index == 1){
    
39.       console.log("内容2");
    
40.     }   
    
41.   });
    
42. });
    
43. </script>
    

复制代码

js用这个比较简洁

1. <script>
   
2. //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
   
3. layui.use('element', function(){
   
4.   var element = layui.element;
   
5. });
   
6. </script>

复制代码