只若初见

layui Tab菜单添加点击事件

电脑版发表于:2020/6/6 20:03

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



关于TNBLOG
TNBLOG,技术分享。技术交流:群号677373950
ICP备案 :渝ICP备18016597号-1
App store Android
精彩评论
{{item.replyName}}
{{item.content}}
{{item.time}}
{{subpj.replyName}}
@{{subpj.beReplyName}}{{subpj.content}}
{{subpj.time}}
猜你喜欢