layui 中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();
        }
    });

});
 

原文链接:https://blog.csdn.net/hss0123456789/article/details/88182545

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

方法二：

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

文档链接：https://www.layui.com/doc/modules/element.html

 

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

 根据文档原文：

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

 

 然后去测试就有效果啦！