layui-选项卡

最新推荐文章于 2025-09-11 02:15:20 发布
转载最新推荐文章于 2025-09-11 02:15:20 发布 · 1.4k 阅读
1 ·
CC 4.0 BY-SA版权
原文链接：https://blog.youkuaiyun.com/ajlgl/article/details/72515295?
文章标签：
#layui
这个示例展示了layui框架中选项卡（Tab）的各种动态操作和样式，包括默认风格、动态增删、Hash地址定位、简洁风格、卡片风格及超过宽度的处理。通过JavaScript实现了Tab的新增、删除和切换功能，同时也演示了如何根据Hash地址定位Tab内容。
layui-选项卡
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>选项卡</title>
        <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    <body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>默认风格的Tab</legend>
</fieldset>
<>
<div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理</li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
      1. 高度默认自适应，也可以随意固宽。
      <br>2. Tab进行了响应式处理，所以无需担心数量多少。
    </div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item">内容3</div>
    <div class="layui-tab-item">内容4</div>
    <div class="layui-tab-item">内容5</div>
  </div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>动态操作Tab</legend>
</fieldset>

<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
  <ul class="layui-tab-title">
    <li class="layui-this" lay-id="11">网站设置</li>
    <li lay-id="22">用户管理</li>
    <li lay-id="33">权限分配</li>
    <li lay-id="44">商品管理</li>
    <li lay-id="55">订单管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容1</div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item">内容3</div>
    <div class="layui-tab-item">内容4</div>
    <div class="layui-tab-item">内容5</div>
  </div>
</div>
<div class="site-demo-button" style="margin-bottom: 0;">
  <button class="layui-btn site-demo-active" data-type="tabAdd">新增Tab项</button>
  <button class="layui-btn site-demo-active" data-type="tabDelete">删除：商品管理</button>
  <button class="layui-btn site-demo-active" data-type="tabChange">切换到：用户管理</button>
</div>

<!-- 通用-970*90 -->
<div>
  <ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="6835627838"></ins>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>Hash地址定位</legend>
</fieldset>
<div class="layui-tab" lay-filter="test">
  <ul class="layui-tab-title">
    <li class="layui-this" lay-id="11">网站设置</li>
    <li lay-id="22">用户管理</li>
    <li lay-id="33">权限分配</li>
    <li lay-id="44">商品管理</li>
    <li lay-id="55">订单管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
      点击该Tab的任一标题，观察地址栏变化，再刷新页面。选项卡将会自动定位到上一次切换的项
    </div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item">内容3</div>
    <div class="layui-tab-item">内容4</div>
    <div class="layui-tab-item">内容5</div>
  </div>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>简洁风格的Tab</legend>
</fieldset>

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理</li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li>
  </ul>
  <div class="layui-tab-content" style="height: 100px;">
    <div class="layui-tab-item layui-show">内容不一样是要有，因为你可以监听tab事件（阅读下文档就是了）</div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item">内容3</div>
    <div class="layui-tab-item">内容4</div>
    <div class="layui-tab-item">内容5</div>
  </div>
</div> 

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>卡片风格的Tab</legend>
</fieldset>

<div class="layui-tab layui-tab-card">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理</li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li>
  </ul>
  <div class="layui-tab-content" style="height: 100px;">
    <div class="layui-tab-item layui-show">默认宽度是相对于父元素100%适应的，你也可以固定宽度。</div>
    <div class="layui-tab-item">2</div>
    <div class="layui-tab-item">3</div>
    <div class="layui-tab-item">4</div>
    <div class="layui-tab-item">5</div>
    <div class="layui-tab-item">6</div>
  </div>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>当Tab数超过一定宽度</legend>
</fieldset>

<div class="layui-tab layui-tab-card" style="width: 290px;">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理</li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li>
  </ul>
  <div class="layui-tab-content" style="height: 100px;">
    <div class="layui-tab-item layui-show">
      1. 宽度足够，就不会出现右上图标；宽度不够，就会开启展开功能。
      <br>2. 如果你的宽度是自适应的，Tab会自动判断是否需要展开，并适用于所有风格。
    </div>
    <div class="layui-tab-item">2</div>
    <div class="layui-tab-item">3</div>
    <div class="layui-tab-item">4</div>
    <div class="layui-tab-item">5</div>
    <div class="layui-tab-item">6</div>
  </div>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>带删除功能的Tab</legend>
</fieldset>

<div class="layui-tab layui-tab-card" lay-allowclose="true">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户基本管理</li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</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">2</div>
    <div class="layui-tab-item">3</div>
    <div class="layui-tab-item">4</div>
    <div class="layui-tab-item">5</div>
    <div class="layui-tab-item">6</div>
  </div>
</div> 

<script src="layui/layui.js" charset="utf-8"></script>
<script>
layui.use('element', function(){
  var $ = layui.jquery
  ,element = layui.element(); //Tab的切换功能，切换事件监听等，需要依赖element模块

  //触发事件
  var active = {
    tabAdd: function(){
      //新增一个Tab项
      element.tabAdd('demo', {
        title: '新选项'+ (Math.random()*1000|0) //用于演示
        ,content: '内容'+ (Math.random()*1000|0)
        ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
      })
    }
    ,tabDelete: function(othis){
      //删除指定Tab项
      element.tabDelete('demo', '44'); //删除：“商品管理”

      othis.addClass('layui-btn-disabled');
    }
    ,tabChange: function(){
      //切换到指定Tab项
      element.tabChange('demo', '22'); //切换到：用户管理
    }
  };

  $('.site-demo-active').on('click', function(){
    var othis = $(this), type = othis.data('type');
    active[type] ? active[type].call(this, othis) : '';
  });

  //Hash地址的定位
  var layid = location.hash.replace(/^#test=/, '');
  element.tabChange('test', layid);

  element.on('tab(test)', function(elem){
    location.hash = 'test='+ $(this).attr('lay-id');
  });

});
</script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223