欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

layui中的tab控件點擊切換觸發(fā)事件

 更新時間：2022年06月28日 14:37:35   作者：我是一個小菜鳥F  
這篇文章主要介紹了layui中的tab控件點擊切換觸發(fā)事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

tab控件點擊切換觸發(fā)事件

在layui中使用到tab控件，如果不想在頁面加載時就加載所有tab的界面，而是點擊某個tab再加載對應(yīng)的數(shù)據(jù)，可以使用tab 的點擊事件。

方法一

這個方法是我最初在網(wǎng)上找的使用方法。

非IE瀏覽器
 
//切換tab 調(diào)用不同的方法
layui.use('element', function(){
    var $ = jQuery = layui.jquery;
    var element = layui.element;
 
    $('.layui-tab-title').on('click', function(title) {
 
        if(title.toElement.textContent=="A標(biāo)題"){
            initQueTSP();
        }else if(title.toElement.textContent=="B標(biāo)題"){
            initQueSP();
        }else if(title.toElement.textContent=="C標(biāo)題"){
            initQueP();
        }
    });
});
IE瀏覽器
 
//切換tab 調(diào)用不同的方法
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官方文檔中的內(nèi)置模塊中的常用元素操作 - layui.element。如圖：

可以看到右邊有一個事件觸發(fā)-觸發(fā)tab切換

根據(jù)文檔原文：

以下代碼是自己測試代碼：

 然后去測試就有效果啦！

layui選項卡無法切換

問題：在使用layui時，選項卡切換不了。

解決

<script>
? ? //注意：選項卡 依賴 element 模塊，否則無法進(jìn)行功能性操作
? ? 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">

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論