web同一页面跳转数据共享—

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>

这篇关于web同一页面跳转数据共享——20181130的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！