layui中的tab控件點擊切換觸發事件

Posted on by

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">

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：