layui中的tab控件點擊切換觸發(fā)事件
更新時間：2022年06月28日 14:37:35 作者：我是一個小菜鳥F
這篇文章主要介紹了layui中的tab控件點擊切換觸發(fā)事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
tab控件點擊切換觸發(fā)事件
在layui中使用到tab控件，如果不想在頁面加載時就加載所有tab的界面，而是點擊某個tab再加載對應的數(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標題"){
initQueTSP();
}else if(title.toElement.textContent=="B標題"){
initQueSP();
}else if(title.toElement.textContent=="C標題"){
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 模塊，否則無法進行功能性操作
? ? 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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了JavaScript中BOM對象原理與用法,,結合實例形式分析了javascript中BOM瀏覽器對象模型相關概念、原理、用法及相關操作注意事項,需要的朋友可以參考下2019-07-07
之前看到一個Android的加載效果不錯，一直想自己動手做一個，正好這段時間重溫了一個Canvas，所以就嘗試了一下。下面這篇文章主要給大家介紹了關于利用canvas實現(xiàn)加載效果的相關資料，需要的朋友可以參考下。2017-07-07
Parcel.js + Vue 2.x 極速零配置打包體驗教程
這篇文章主要介紹了Parcel.js + Vue 2.x 極速零配置打包體驗 的相關資料,需要的朋友可以參考下2017-12-12
JavaScript是一個絕冠全球的編程語言，可用于Web開發(fā)、移動應用開發(fā)（PhoneGap、Appcelerator）、服務器端開發(fā)（Node.js和Wakanda）等等。本文主要介紹JavaScript應用的一些小技巧。2016-12-12
在處理前端重復請求問題時,通過共享?Promise?實現(xiàn)請求合并和結果復用是常見的高效解決方案,本文給大家介紹了詳細實現(xiàn)思路和代碼示例,需要的朋友可以參考下2025-03-03
js HTML5多圖片上傳及預覽實例解析（不含前端的文件分割）
這篇文章主要詳細解析了js HTML5多圖片上傳及預覽實例，不含前端的文件分割，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
一文帶你快速理解JavaScript中call()函數(shù)的使用
這篇文章主要為大家詳細介紹了JavaScript中call()函數(shù)的使用的相關知識，文中的示例代碼講解詳細，具有一定的學習價值，需要的可以參考一下2023-03-03
javascript實現(xiàn)禁止復制網(wǎng)頁內(nèi)容匯總
本文給大家匯總介紹了幾種使用javascript和CSS實現(xiàn)禁止復制頁面內(nèi)容的方法，非常的實用，有需要的小伙伴可以參考下。2015-12-12
JavaScript中的函數(shù)聲明和函數(shù)表達式區(qū)別淺析
這篇文章主要介紹了JavaScript中的函數(shù)聲明和函數(shù)表達式區(qū)別淺析,本文總結的淺顯易懂,非常好的一篇技術文章,需要的朋友可以參考下2015-03-03
詳解js中Number()、parseInt()和parseFloat()的區(qū)別
本文主要對js中Number()、parseInt()和parseFloat()的區(qū)別進行詳細介紹，具有很好的參考價值，需要的朋友一起來看下吧2016-12-12