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

相关内容

40万新车被小孩引燃 车主...
近日,小孩意外引燃价值40万新车,车主展现大度再订一辆。事件引发社...
2025-02-10 07:23:35
有影院靠《哪吒2》7天赚了...
《哪吒2》上映七天创下影院高收益奇迹,吸引观众热议和业界高度评价。...
2025-02-10 06:46:40
小米汽车:经查完全不存在网...
小米汽车回应SU7“断轴”传闻,经查完全不存在。官方迅速澄清,强调...
2025-02-10 06:23:39
国产剧终于有不靠男主救的女...
国产剧新趋势:女主角不再依赖男主救援,展现独立与坚强。打破传统模式...
2025-02-10 05:46:37
网络木马攻击中的隐藏技术及...
本文详述了网络木马攻击中的伪装、加密、进程注入与隐藏等技术手段及其...
2025-02-10 04:23:42
网络木马攻击中的钓鱼欺诈手...
本文详述了网络木马攻击中的钓鱼欺诈手段,包括邮件钓鱼、社交工程钓鱼...
2025-02-10 03:46:41

热门资讯

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