tnblog
首页
视频
资源
登录

layui Tab菜单添加点击事件

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

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

<div class="layui-tab" lay-filter="test1">
    <ul class="layui-tab-title">
        <li class="layui-this" lay-id="111" >文章列表</li>
        <li lay-id="222">发送信息</li>
        <li lay-id="333">权限分配</li>
        <li lay-id="444">审核</li>
        <li lay-id="555">订单管理</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>

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

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

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



欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739

评价
如果有缘,错过了还会重来,如果无缘,相遇了也会离开
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术