1. 程式人生 > >web同一頁面跳轉資料共享——20181130

web同一頁面跳轉資料共享——20181130

不同頁面之間跳轉資料共享:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="layui-v2.4.5/layui/css/layui.css"  media="all">
  <script src="layui-v2.4.5/layui/layui.js" charset="utf-8"></script>
  <style>
  
  [layui-tab-title]{
  float:left;
  width:18%;
  }
  .layui-tab-content{
  height:100%;
  width:100%;
  top:40px;
  bottom:0px;
  position:absolute;
  }
  </style>
</head>
<body>  
<div class="layui-tab layui-tab-card" lay-filter="test" style="margin-top: 0px;">
  <ul class="layui-tab-title">
    <li id="layui-tab-title-1" class="layui-this" lay-id="11" layui-tab-title>網站設定</li>
    <li id="layui-tab-title-2" lay-id="22" layui-tab-title>使用者管理</li>
    <li id="layui-tab-title-3" lay-id="33" layui-tab-title>許可權分配</li>
    <li id="layui-tab-title-4" lay-id="44" layui-tab-title>商品管理</li>
    <li id="layui-tab-title-5" lay-id="55" layui-tab-title>訂單管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">點選該Tab的任一標題,觀察位址列變化,再重新整理頁面。選項卡將會自動定位到上一次切換的項
    	<div id="try">
    	</div>
    </div>
    <div class="layui-tab-item">內容2</div>
    <div class="layui-tab-item">內容3</div>
    <div class="layui-tab-item">內容4</div>
    <div class="layui-tab-item">內容5</div>
  </div>
</div>

<script>
layui.use('element', function(){
  var $ = layui.jquery
  ,element = layui.element; //Tab的切換功能,切換事件監聽等,需要依賴element模組

  //Hash地址的定位
  var layid = location.hash.replace(/^#test=/, '');
  element.tabChange('test', layid);
  
  element.on('tab(test)', function(elem){
    location.hash = 'test='+ $(this).attr('lay-id');
  });
  
});
</script>

</body>
</html>