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,選項卡會自動切換到當前項

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM