0
我有隐藏/显示内嵌框架（外部页面通过CGI显示文本列 - 从左到右显示）的当前代码，通过页面顶部的按钮。现在，iframe使用绝对定位，但我希望他们'重新排序'并根据所显示的隐藏位置来更改位置。 EX：如果只显示2个iframe，则会减少占用的左右空间。 这很重要，因为我一次只能添加比页面更多的内容。 （另外，我在页面加载试图改变的Jscript到默认隐藏的一切，而不是显示）通过隐藏/显示重新定位内联框架
function myFunctionui() {
var x = document.getElementById('ui');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function myFunctiontic() {
var x = document.getElementById('tic');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function myFunctionlab() {
var x = document.getElementById('lab');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function myFunctionzone1_4() {
var x = document.getElementById('zone1_4');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function myFunctionzone5() {
var x = document.getElementById('zone5');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function myFunctionslas() {
var x = document.getElementById('slas');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function myFunctionhiks() {
var x = document.getElementById('hiks');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}body,
html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#tic {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 60px;
}
#lab {
position: absolute;
left: 220;
right: 0;
bottom: 0;
top: 60px;
}
#zone1_4 {
position: absolute;
left: 420;
right: 0;
bottom: 0;
top: 60px;
}
#zone5 {
position: absolute;
left: 630;
right: 0;
bottom: 0;
top: 60px;
}
#slas {
position: absolute;
left: 840;
right: 0;
bottom: 0;
top: 60px;
}
#hiks {
position: absolute;
left: 1050;
right: 0;
bottom: 0;
top: 60px;
}
iframe {
overflow: scroll;
height: 100%;
seamless;
border: 0;
}<button onclick="myFunctionui()">^</button>
<div id="ui">
<button onclick="myFunctiontic()">TICs</button>
<button onclick="myFunctionlab()">LABs</button>
<button onclick="myFunctionzone1_4()">ZONE 1-4</button>
<button onclick="myFunctionzone5()">ZONE 5</button>
<button onclick="myFunctionslas()">SLAS</button>
<button onclick="myFunctionhiks()">HIKS</button>
</div>
<div id="tic">
<iframe src="https://itcrops.itap.purdue.edu/opstools/ticstatus/ticstatus.cgi" width="130" frameborder="0"></iframe>
</div>
<div id="lab">
<iframe src="https://itcrops.itap.purdue.edu/opstools/labstatus/labstatus.cgi" width="130" frameborder="0"></iframe>
</div>
<div id="zone1_4">
<iframe src="https://itcrops.itap.purdue.edu/opstools/pr/Dev/lastat/lastations1_4.cgi" width="250" frameborder="0"></iframe>
</div>
<div id="zone5">
<iframe src="https://itcrops.itap.purdue.edu/opstools/pr/Dev/lastat/lastations5.cgi" width="250" frameborder="0"></iframe>
</div>
<div id="slas">
<iframe src="https://itcrops.itap.purdue.edu/opstools/pr/Dev/lastat/slastations.cgi" width="250" frameborder="0"></iframe>
</div>
<div id="hiks">
<iframe src="https://itcrops.itap.purdue.edu/opstools/pr/Dev/lastat/hiksstations.cgi" width="250" frameborder="0"></iframe>
</div>
难道他们要的位置是：绝对的？ –
nope，我只是暂时做了这些，我不知道如何让它们互相堆叠在一起 –
为什么body和html溢出：hidden？ –