layui中tab的切换

layui中tab的切换,可使用element.tabChange(filter, layid);用于外部切换到指定的Tab项上,如:element.tabChange('demo', 'layid'); //切换到 lay-id="yyy" 的这一项

下例所示

element.tabChange('demo', '22'); //切换到:用户管理

<div class="layui-tab" lay-filter="demo">
  <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>

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui 是一款优秀的前端 UI 框架,其提供了很多实用的组件,其包括 tab 组件。tab 组件可以用于制作选项卡切换效果,用起来非常方便。 使用 layui tab 组件实现切换效果的步骤如下: 1. 引入 layui 的样式文件和相关 JS 文件。 2. 在 HTML 文件添加 tab 容器,如下: <ul class="layui-nav layui-tab" lay-filter="tab"> </ul> 3. 在 JS 文件定义 tab 的数据,如下: layui.use(['element', 'layer', 'form', 'jquery', 'tab'], function () { var element = layui.element, layer = layui.layer, form = layui.form, $ = layui.jquery, tab = layui.tab; tab.tabAdd({ title: '选项卡标题', content: '选项卡内容', id: '选项卡ID' }); }); 4. 可以添加多个选项卡,即在上面的函数多次调用 tabAdd 方法。 5. 设置动态加载选项卡内容的方法,如下: //动态获取选项卡内容 function getTabContent(tabId) { var title = $('#' + tabId).text(); if (title == '选项卡1') { return '选项卡1内容'; } else if (title == '选项卡2') { return '选项卡2内容'; } } 6. 绑定 tab 切换事件,如下: // 利用事件委托方式,新增选项卡切换事件 $(document).on('click', '.layui-tab-title li', function () { var tabId = $(this).attr('lay-id'); var content = getTabContent(tabId); tab.tabChange(tabId); }); 7. 最后在 HTML 文件添加相应的选项卡,即可实现 tab 切换效果。 以上就是使用 layui tab 组件实现切换效果的主要步骤,具体实现可以根据自己的需要进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值