layui 选项卡tab的element事件
未知
2023-11-22 11:20:01
0

问题描述:

  点击选项后,页面固定在此 tab2上,刷新页面也不跳转到 tab1上。


问题解答:

<div class="layui-tab"  lay-filter="mytab">
          <ul class="layui-tab-title">
            <li class="layui-this" lay-id='1'>百度一言</li>
            <li lay-id='2'>openai</li>                     
          </ul>
          <div class="layui-tab-content">
              <!-- 百度一言 -->
              <div class="layui-tab-item layui-show">百度一言 </div>
            <div class="layui-tab-item ">openai</div>
           </div>
</div>
      layui.use(['element'],function(){        
            var element = layui.element;
              var layid = location.hash.replace(/^#mytab=/, '');
               //假设当前地址为:http://a.com#test1=222,那么选项卡会自动切换到“发送消息”这一项
              element.tabChange('mytab', layid);
                //一些事件触发
              element.on('tab(mytab)', function(data){
                    console.log(this); //当前Tab标题所在的原始DOM元素
                  console.log(data.index); //得到当前Tab的所在下标
                  console.log(data.elem); //得到当前的Tab大容器
                location.hash = 'mytab='+ this.getAttribute('lay-id');
                //或者使用这个 location.hash = 'mytab='+ data.index
              });
     })

相关内容

MySQL变量的生命周期管...
MySQL变量管理关键在于生命周期控制。需了解全局、会话及用户自定...
2024-11-20 20:46:37
MySQL变量的作用域与访...
摘要: MySQL变量具有作用域和访问控制,局部变量限于特定上下...
2024-11-20 20:00:40
动态分配MySQL变量的示...
MySQL中,变量用于存储临时数据,包括全局和会话变量以及用户定义...
2024-11-20 18:23:38
MySQL变量存储的数据类...
MySQL支持多种数据类型以存储不同种类的变量,包括数值型、字符串...
2024-11-20 18:00:48
MySQL变量在数据库操作...
MySQL变量在数据库操作中至关重要,用于存储数据、配置操作、实现...
2024-11-20 17:46:42
K8s在云服务器上的资源管...
K8s作为开源容器编排系统,在云服务器上实现自动化资源管理,提高运...
2024-11-20 17:23:38

热门资讯

JavaScript获取当前协... JavaScript获取当前协议,域名,路径
解决Phpcms V9手机门户... 第一步:开启手机网站。位置:模块 》手机门户 》 添加手机站点,如果模块里面没有手机门户,那么就在模...
layui tooltip提示... 在layui表单中,我们想把一个标签做出提示,以标明这个表单元素是做什么有什么功能时,就可以用上提...
layui中出错Unexpec... layui中出错Unexpected identifier
如何在html中禁止复制文字 问题描述: 如何禁止别人复制自己的文章? 解决办法: 在body标签中添加以下代码: onconte...
JS实现html打印功能,打印... !DOCTYPE htmlhtmlhead meta charset=utf-8 title打印功能...
bootstrap 图片文字居... 问题描述: 让图片和文字居中显示。 解决办法: !-- style--.navbars img{ m...
bootstrap图片排版布局 问题描述: 在使用bootstrap的时候,出现了这样的问题。 排版对不齐。 解决办法: 通过上图发...
手机端底部定位 问题描述: 需要实现的效果 解决办法: !-- 底部 -- div class=layui-row ...