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
              });
     })

相关内容

探索 PHP sg15 在...
摘要: 本文探讨了PHP的sg15项目在Web开发中的应用,包括...
2026-02-11 01:23:34
探索PHP与YAML的互操...
本文探讨了PHP与YAML的互操作性,介绍了YAML的数据格式及P...
2026-02-02 01:23:35
使用PHP处理YAML数据...
本文介绍了使用PHP处理YAML数据的技巧和策略,包括解析、操作Y...
2026-02-01 01:23:40
深入理解MySQL视图的工...
摘要: MySQL视图是一种虚拟表,通过封装SQL查询定义。它不...
2026-01-31 01:23:34
MySQL视图与普通表的区...
MySQL视图与普通表:虚拟与实际的存储方式,视图只可查询不可修改...
2026-01-30 01:23:36
常见MySQL视图问题及解...
MySQL视图常见问题包括命名冲突、依赖性管理、性能问题和安全性问...
2026-01-27 01:23:44

热门资讯

downloadable fo... downloadable font: Glyph bbox was incorrect怎么处理
腾讯邮箱qq邮箱使用SMTP开... 第一步:登录 https://mail.qq.com/ 登录后点击设置---账号 第二步:点击【开启...
layui tooltip提示... 在layui表单中,我们想把一个标签做出提示,以标明这个表单元素是做什么有什么功能时,就可以用上提...
layui中出错Unexpec... layui中出错Unexpected identifier
解决Phpcms V9手机门户... 第一步:开启手机网站。位置:模块 》手机门户 》 添加手机站点,如果模块里面没有手机门户,那么就在模...
JavaScript获取当前协... JavaScript获取当前协议,域名,路径
JS实现html打印功能,打印... !DOCTYPE htmlhtmlhead meta charset=utf-8 title打印功能...
bootstrap 图片文字居... 问题描述: 让图片和文字居中显示。 解决办法: !-- style--.navbars img{ m...
bootstrap图片排版布局 问题描述: 在使用bootstrap的时候,出现了这样的问题。 排版对不齐。 解决办法: 通过上图发...