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

