亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

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

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

方法一

這個(gè)方法是我最初在網(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這個(gè)屬性了，然后我一時(shí)半會(huì)不知道原因，就放棄了這個(gè)使用方法，又找到了另一種方法（如下方法二）。具體報(bào)錯(cuò)如圖所示：

方法二

打開layui官方文檔中的內(nèi)置模塊中的常用元素操作 - layui.element。如圖：

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

根據(jù)文檔原文：

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

 然后去測試就有效果啦！

layui選項(xiàng)卡無法切換

問題：在使用layui時(shí)，選項(xiàng)卡切換不了。

解決

<script>
? ? //注意：選項(xiàng)卡 依賴 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表示有多少個(gè)選項(xiàng)卡
? ? ? ? ? ? $(document).resize()
? ? ? ? ? ? }
? ? ? ? });
? ? });
</script>
<div class="layui-tab layui-tab-card" lay-filter="table_box">

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

相關(guān)文章

最新評(píng)論