<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>tabs 内部使用 iframe 嵌套 url 页面</title><link rel="stylesheet" href="../../../libs/layui/layui-2.4.5/dist/css/layui.css"><script src="../../../libs//layui/layui-2.4.5/dist/layui.js"></script><style>/*** iframe 自适应方案*/.layui-tab-content .layui-show {position: fixed;width: 100%;height: 90%;top: 10%;left: 0;}</style>
</head><body><div class="layui-fluid weadmin-body"><div class="layui-tab layui-tab-brief" lay-filter="tabs"><ul class="layui-tab-title"><li class="layui-this" lay-id="0">明细</li><li lay-id="1">汇总</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show" style=""><iframe id="iframe_jylc_0" frameborder="0" src="./1.html" scrolling="yes" class="weIframe"style="width: 100%;height: 100%;"></iframe></div><div class="layui-tab-item "><iframe id="iframe_jylc_1" frameborder="0" src="./2.html" scrolling="yes" class="weIframe"style="width: 100%;height: 100%;"></iframe></div></div></div></div><script>layui.use(['jquery', 'layer', 'form', 'table', 'laydate', 'util', 'upload', 'element'],function () {var Hussar = layui.Hussar;var $ = layui.jquery;var layer = layui.layer;var form = layui.form;var laydate = layui.laydate;var $ax = layui.HussarAjax;var element = layui.element;var table = layui.table;var util = layui.util;var layerWindow;var upload = layui.upload;//tabs 点击事件触发element.on('tab(tabs)', function (data) {// console.log(data);// console.log($(this)); //当前Tab标题所在的原始DOM元素console.log(data.index); //得到当前Tab的所在下标// console.log(data.elem); //得到当前的Tab大容器// $(data)// console.log($("#iframe_jylc_"+data.index))});});</script>
</body></html>内部的 1.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>tab1</title><style></style>
</head><body><div style="width: 100%;height: 100%;border:1px solid green;"><span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span><span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span><span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span><span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span><span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span><span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span><span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span><span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span><span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span><span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!11hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span><span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span><span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span><span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span><span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span><span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span><span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span><span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span><span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span><span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span><span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span><span>hello,world!111hello,world!111hello,world!111hello,world!111hello,world!111</span></div></body></html>2.html:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>tab2</title>
</head><body><div style="width: 100%;height: 100%;border:1px solid blue;"><div>hello,world!222</div><div>hello,world!222</div><div>hello,world!222</div><div>hello,world!222</div><div>hello,world!222</div><div>hello,world!222</div><div>hello,world!222</div><div>hello,world!222</div><div>hello,world!222</div><div>hello,world!222</div><div>hello,world!222</div><div>hello,world!222</div><div>hello,world!222</div><div>hello,world!222</div><div>hello,world!222</div><div>hello,world!222</div><div>hello,world!222</div><div>hello,world!222</div><div>hello,world!222</div><div>hello,world!222</div><div>hello,world!222</div><div>hello,world!222</div></div></body></html>效果图：
