layui中的tab控件點(diǎn)擊切換觸發(fā)事件
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)文章
這篇文章主要介紹了JavaScript中BOM對(duì)象原理與用法,,結(jié)合實(shí)例形式分析了javascript中BOM瀏覽器對(duì)象模型相關(guān)概念、原理、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-07-07
利用canvas實(shí)現(xiàn)的加載動(dòng)畫效果實(shí)例代碼
之前看到一個(gè)Android的加載效果不錯(cuò)，一直想自己動(dòng)手做一個(gè)，正好這段時(shí)間重溫了一個(gè)Canvas，所以就嘗試了一下。下面這篇文章主要給大家介紹了關(guān)于利用canvas實(shí)現(xiàn)加載效果的相關(guān)資料，需要的朋友可以參考下。2017-07-07
Parcel.js + Vue 2.x 極速零配置打包體驗(yàn)教程
這篇文章主要介紹了Parcel.js + Vue 2.x 極速零配置打包體驗(yàn) 的相關(guān)資料,需要的朋友可以參考下2017-12-12
JavaScript是一個(gè)絕冠全球的編程語言，可用于Web開發(fā)、移動(dòng)應(yīng)用開發(fā)（PhoneGap、Appcelerator）、服務(wù)器端開發(fā)（Node.js和Wakanda）等等。本文主要介紹JavaScript應(yīng)用的一些小技巧。2016-12-12
通過共享Promise解決前端重復(fù)請(qǐng)求的代碼示例
在處理前端重復(fù)請(qǐng)求問題時(shí),通過共享?Promise?實(shí)現(xiàn)請(qǐng)求合并和結(jié)果復(fù)用是常見的高效解決方案,本文給大家介紹了詳細(xì)實(shí)現(xiàn)思路和代碼示例,需要的朋友可以參考下2025-03-03
js HTML5多圖片上傳及預(yù)覽實(shí)例解析（不含前端的文件分割）
這篇文章主要詳細(xì)解析了js HTML5多圖片上傳及預(yù)覽實(shí)例，不含前端的文件分割，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
一文帶你快速理解JavaScript中call()函數(shù)的使用
這篇文章主要為大家詳細(xì)介紹了JavaScript中call()函數(shù)的使用的相關(guān)知識(shí)，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價(jià)值，需要的可以參考一下2023-03-03
javascript實(shí)現(xiàn)禁止復(fù)制網(wǎng)頁內(nèi)容匯總
本文給大家匯總介紹了幾種使用javascript和CSS實(shí)現(xiàn)禁止復(fù)制頁面內(nèi)容的方法，非常的實(shí)用，有需要的小伙伴可以參考下。2015-12-12
JavaScript中的函數(shù)聲明和函數(shù)表達(dá)式區(qū)別淺析
這篇文章主要介紹了JavaScript中的函數(shù)聲明和函數(shù)表達(dá)式區(qū)別淺析,本文總結(jié)的淺顯易懂,非常好的一篇技術(shù)文章,需要的朋友可以參考下2015-03-03
詳解js中Number()、parseInt()和parseFloat()的區(qū)別
本文主要對(duì)js中Number()、parseInt()和parseFloat()的區(qū)別進(jìn)行詳細(xì)介紹，具有很好的參考價(jià)值，需要的朋友一起來看下吧2016-12-12