tnblog
首页
视频
资源
登录

layui Tab菜单添加点击事件

11349人阅读 2020/6/6 20:03 总访问:688553 评论:0 收藏:0 手机
分类: 前端

layui 实现Tab菜单很简单使用下面的代码即可

  1. <div class="layui-tab" lay-filter="test1">
  2.     <ul class="layui-tab-title">
  3.         <li class="layui-this" lay-id="111" >文章列表</li>
  4.         <li lay-id="222">发送信息</li>
  5.         <li lay-id="333">权限分配</li>
  6.         <li lay-id="444">审核</li>
  7.         <li lay-id="555">订单管理</li>
  8.     </ul>
  9.     <div class="layui-tab-content">
  10.     <div class="layui-tab-item layui-show">1</div>
  11.     <div class="layui-tab-item">2</div>
  12.     <div class="layui-tab-item">3</div>
  13.     <div class="layui-tab-item">4</div>
  14.     <div class="layui-tab-item">5</div>
  15.     </div>
  16. </div>

如果需要绑定事件可以通过lay-filter来绑定事件:

  1. <script>
  2. layui.use('element'function(){
  3.   var element = layui.element; 
  4.   //监听Tab切换,以改变地址hash值
  5.   element.on('tab(test1)'function(){
  6.     alert(this.getAttribute('lay-id'));
  7.   });
  8. });
  9. </script>

然后就可以在改变事件中获取lay-id



欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

layui Tab切换更改同一个内容

layui tab切换时如何更改同一个内容呢,不用一个tab对应一个内容,就相当于改变同一个内容,其实很简单就是只留layui-tab-c...

layui Table按钮事件无效

注意:layui绑定事件的时候table.on(&#39;tool(test)&#39;)这里的test并不是表格的id,而是lay-filter=&quot;test&quot;,所...

layui Table使用templet,解析状态字段逻辑处理等

比如有这样一个表格:我们想把其中的状态变成具体的文本描述,就可以使用layui table的templet方法1:直接给一个函数即可。...

layui表格的简单使用layui Table 数据展示,数据修改,数据更新。layui Table的简单使用

前端代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;U...
如果有缘,错过了还会重来,如果无缘,相遇了也会离开
排名
9
文章
115
粉丝
5
评论
5
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术