• 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,选项卡会自动切换到当前项

  • 相关阅读:
    软件工程5
    软件工程3
    软件工程4
    软件工程2
    2020软件工程作业01
    2020软件工程个人作业06——软件工程实践总结作业
    个人作业——04
    清风不知道——冲刺日志(第一天)
    清风不知道——凡是预则立
    2020软件工程作业05
  • 原文地址:https://www.cnblogs.com/xiong88/p/12461250.html
Copyright © 2020-2023  润新知