javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > layui tab控件点击切换事件

layui中的tab控件点击切换触发事件

作者:我是一个小菜鸟F

这篇文章主要介绍了layui中的tab控件点击切换触发事件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

tab控件点击切换触发事件

在layui中使用到tab控件,如果不想在页面加载时就加载所有tab的界面,而是点击某个tab再加载对应的数据,可以使用tab 的点击事件。

方法一

这个方法是我最初在网上找的使用方法。

非IE浏览器
 
//切换tab 调用不同的方法
layui.use('element', function(){
    var $ = jQuery = layui.jquery;
    var element = layui.element;
 
    $('.layui-tab-title').on('click', function(title) {
 
        if(title.toElement.textContent=="A标题"){
            initQueTSP();
        }else if(title.toElement.textContent=="B标题"){
            initQueSP();
        }else if(title.toElement.textContent=="C标题"){
            initQueP();
        }
    });
});
IE浏览器
 
//切换tab 调用不同的方法
layui.use('element', function(){
    var $ = jQuery = layui.jquery;
    var element = layui.element;
    element.on('tab(queSearch)', function(data){
        if(data.index==0){
            initQueP();
        }else if(data.index==1){
            initQueTSP();
        }else if(data.index==2){
            initQueSP();
        }
    });
 
});

但是,突然有一天,我的title.toElement就为null,就没有textContent这个属性了,然后我一时半会不知道原因,就放弃了这个使用方法,又找到了另一种方法(如下方法二)。具体报错如图所示:

方法二

打开layui官方文档中的内置模块中的常用元素操作 - layui.element。如图:

可以看到右边有一个事件触发-触发tab切换

根据文档原文:

以下代码是自己测试代码:

 然后去测试就有效果啦!

layui选项卡无法切换

问题:在使用layui时,选项卡切换不了。

解决

<script>
    //注意:选项卡 依赖 element 模块,否则无法进行功能性操作
    layui.use('element', function () {
    var element = layui.element;
    
    element.on('tab(table_box)', function (data) {
        console.log(data);
            if(data.index == 0 || data.index == 1 || data.index == 2){
            //这里的index表示有多少个选项卡
            $(document).resize()
            }
        });
    });
</script>
<div class="layui-tab layui-tab-card" lay-filter="table_box">

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文