zoukankan      html  css  js  c++  java
  • layui tab选项卡Hash地址的定位和跳转到指定tab栏

    Hash地址的定位,页面改变某一选项区中的内容后,其他内容同步刷新,内容选项定位在指定的区域;

    html:

    <div class="layui-tab layui-flex" lay-filter="test">
        <ul class="layui-tab-title">
            <li class="layui-this" lay-id="11">11111</li>
            <li lay-id="22">22222</li>
            <li lay-id="33">33333</li>
            <li lay-id="44">44444</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div>aaaaa</div>
            </div>
            <div class="layui-tab-item">
                <div>bbbbb</div>
            </div>
            <div class="layui-tab-item">
                <div>ccccc</div>
            </div>
            <div class="layui-tab-item">
                <div>ddddd</div>
            </div>
        </div>
    </div>

    js

    // layui.use(['form', 'layer', 'table', 'laytpl', 'laydate', 'element'], function() {
    //    var form = layui.form,
    //    layer = layui.layer, 
    //    $ = layui.jquery,
    //    laytpl = layui.laytpl,
    //    table = layui.table, 
    //    element = layui.element;
    //    参数多,这里只用到element 
    
    //Hash地址的定位 
      layui.use('element', function(){
        var $ = layui.jquery
        ,element = layui.element; //切换,事件监听等,需要依赖element模块
        
        var layid = location.hash.replace(/^#test=/, '');
        // lay-filter="test" 地址栏中参数的名称;
        // layid作为唯一的匹配索引,以用于外部的定位切换
       
        element.tabChange('test', layid);
        //1:element.tabChange(filter, layid); 用于外部切换到指定的Tab项上,参数同上
        
        element.on('tab(test)', function(elem){
         //2:element.on(filter, callback); 用于元素的一些事件监听,以改变地址hash值
    
          location.hash = 'test='+ $(this).attr('lay-id'); 
        });
        
      });

    跳转到指定tab栏:http://a.com#now=22,选项卡会自动切换到当前项

  • 相关阅读:
    学习Python第三天
    学习Python第二天
    学习Python第一天
    centos7 系统优化
    crond计划任务
    day2
    day1
    A.浏览器访问 kube-apiserver 安全端口
    12.清理集群
    11.部署 harbor 私有仓库
  • 原文地址:https://www.cnblogs.com/xiong88/p/12461250.html
Copyright © 2011-2022 走看看