Layui 如何使用tab选项卡
侧边栏壁纸
  • 累计撰写 635 篇文章
  • 累计收到 0 条评论

Layui 如何使用tab选项卡

加速器之家
2024-08-22 / 0 评论 / 4 阅读 / 正在检测是否收录...

layui 选项卡通过 element模块的监听tab事件来进行切换操作,元素功能的开启只需要加载element模块即会自动完成,所以不用跟其它模块一样为某一个功能而调用一个方法。她只需要找到她支持的元素,如你的页面存在一个 Tab元素块,那么element模块会自动赋予她该有的功能。

例子:

<div class="layui-tab" lay-filter="demo">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>商品管理</li>
    <li>订单管理</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>
</div>

js代码:引入element

layui.use('element', function(){
  var element = layui.element;
  
  //一些事件触发
  element.on('tab(demo)', function(data){
    console.log(data);
  });
});
0

评论

博主关闭了当前页面的评论