iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >layui中的tab控件点击切换触发事件
  • 472
分享到

layui中的tab控件点击切换触发事件

2024-04-02 19:04:59 472人浏览 八月长安
摘要

目录tab控件点击切换触发事件方法一方法二layui选项卡无法切换解决tab控件点击切换触发事件 在layui中使用到tab控件,如果不想在页面加载时就加载所有tab的界面,而是点击

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: layui中的tab控件点击切换触发事件

本文链接: https://www.lsjlt.com/news/152873.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • layui中的tab控件点击切换触发事件
    目录tab控件点击切换触发事件方法一方法二layui选项卡无法切换解决tab控件点击切换触发事件 在layui中使用到tab控件,如果不想在页面加载时就加载所有tab的界面,而是点击...
    99+
    2024-04-02
  • vue中的主动触发点击事件
    目录主动触发点击事件如何自动触发点击事件模拟点击下载文件、图片主动触发点击事件 由vue代码触发点击事件,实现的效果是:点击按钮,触发 <input> 输入框点击事件,从...
    99+
    2024-04-02
  • jquery如何触发点击事件
    使用`.click()`方法来触发点击事件。例如:```javascript// 通过 ID 选择器选中需要触发点击事件的元素$("...
    99+
    2023-08-15
    jquery
  • C#TabControl控件中TabPage选项卡切换时的触发事件问题
    目录TabControl控件中TabPage选项卡切换时的触发事件C#选项卡TabControl控件隐藏执行选项卡的方式总结TabControl控件中TabPage选项卡切换时的触发...
    99+
    2023-05-17
    C# TabControl控件 TabPage选项卡切换 TabPage切换时触发事件
  • Vue手动控制点击事件Click触发方式
    目录手动控制点击事件Click触发方法一方法二Vue点击click事件解析废话不多说,先上代码手动控制点击事件Click触发 方法一 变量的值&&触发函数 方法二 ...
    99+
    2024-04-02
  • 怎么解决vue vantUI tab切换时list组件不触发load事件的问题
    小编给大家分享一下怎么解决vue vantUI tab切换时list组件不触发load事件的问题,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!最近由于公司项目需要,用vue写了几个简单的页...
    99+
    2024-04-02
  • jquery点击input触发的事件是什么
    这篇“jquery点击input触发的事件是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“jquery点击input触发...
    99+
    2023-07-04
  • jquery点击input触发什么事件吗
    本教程操作环境:windows7系统、jquery3.6.1版本、Dell G3电脑。jquery点击input触发“焦点focus事件”。焦点就是关注的区域,即当前光标被激活的位置,在页面屏幕中闪动的小竖线,表示网页某个控件被选中,可以被...
    99+
    2022-11-22
    jquery
  • jquery如何实现点击文字触发点击事件
    这篇文章主要介绍“jquery如何实现点击文字触发点击事件”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“jquery如何实现点击文字触发点击事件”文章能帮助大家解决...
    99+
    2024-04-02
  • vue中怎么通过父组件点击触发子组件事件
    这期内容当中小编将会给大家带来有关vue中怎么通过父组件点击触发子组件事件,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。父组件app.vue<template>...
    99+
    2024-04-02
  • javascript中怎么触发模拟鼠标点击事件
    本篇文章为大家展示了javascript中怎么触发模拟鼠标点击事件,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。事件触发器就是用来触发某个元素下的某个事件,IE下f...
    99+
    2024-04-02
  • JavaScript onclick点击事件-点击切换图片且自动播放
    在页面中放图片并设置四个button,可以通过点击上一张下一张来切换图片(翻到最后一张自动切换到第一张).用户点击自动播放,每隔两秒自动切换(类似轮播图),点击停止播放,就终止播放,...
    99+
    2024-04-02
  • VUE中v-html不能触发点击事件怎么办
    这篇文章主要介绍VUE中v-html不能触发点击事件怎么办,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!背景:后端返前端html格式的数据,前端用v-html解析渲染,如:<a...
    99+
    2024-04-02
  • 使用pyqt5 实现ComboBox的鼠标点击触发事件
    一、自定义MyComboBox # MyComboBox.py from PyQt5.QtWidgets import QComboBox from PyQt5.QtCore i...
    99+
    2024-04-02
  • css可以触发点击事件的方法是什么
    这篇文章主要介绍了css可以触发点击事件的方法是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇css可以触发点击事件的方法是什么文章都会有所收获,下面我们一起来看看吧。 ...
    99+
    2024-04-02
  • 怎么解决vue点击弹窗自动触发点击事件的问题
    这篇文章给大家分享的是有关怎么解决vue点击弹窗自动触发点击事件的问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。业务场景:使用vue +element ui 的el-dialog,点击弹窗之后,默认加载第一个...
    99+
    2023-06-15
  • 如何解决Js先触发失去焦点事件再执行点击事件的问题
    这篇文章主要介绍了如何解决Js先触发失去焦点事件再执行点击事件的问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。最近在做公司的某个从项目,...
    99+
    2024-04-02
  • JavaScript关于某元素点击事件的监听和触发
    目录一. 触发元素同步效果方法一: 原生JavaScript的click()点击事件方法二:JQuery事件 — trigger()方法二. 触发元素...
    99+
    2024-04-02
  • javascript触发按钮的被点击事件的方法是什么
    这篇文章主要介绍“javascript触发按钮的被点击事件的方法是什么”,在日常操作中,相信很多人在javascript触发按钮的被点击事件的方法是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操...
    99+
    2024-04-02
  • vue点击弹窗自动触发点击事件的解决办法(模拟场景)
    业务场景:使用vue +element ui 的el-dialog,点击弹窗之后,默认加载第一个按钮的数据进行初始化。  div  指令: // 自动触发...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作