我只是想为家人提供网站。我已经用CSS完成了基本的html,但是有一个问题。我需要实现链接到php中两种形式的页面更改iframe。现在,我已经找到了更改href的代码,但是这些iframe具有不同的高度,因此我想将它们都关闭到div中,并使用按钮显示第一或第二个。
这是到目前为止的代码:
<section id="predplatne" class="clearfix">
<div class="predplatne_in">
<h2>Text</h2>
<div class="vyber">
<button class="button"><a href="http://www.php" target="frame">1</a></button>
<button class="button"><a href="http://www.php2" target="frame">2</a></button>
</div>
<div class="box">
<div class="in">
<iframe allowfullscreen frameborder="0" height="1700" id="frame" name="frame" src="http://www.php" width="480"></iframe> <a href="http://www.php" target="frame"></a> <a href="http://www.php2" target="frame"></a>
</div>
</div>
</div>
</div>
答案 0 :(得分:0)
您可以通过以下一些方法来实现
Composer
#if1, #if2{
display:none;
}
#btn1:active ~ div #if1, #btn2:active ~ div #if2{
display:block;
}
#rd1:checked ~ div #if1, #rd2:checked ~ div #if2{
display:block;
}
#cb1:checked ~ div #if1, #cb2:checked ~ div #if2{
display:block;
}
最简单的方法是使用javascript,而不仅仅是html和css
希望有帮助
答案 1 :(得分:0)
您可以使用JS。据我了解,您想在单击按钮时显示<iframe>
吗?
首先,创建您的<iframe>
,并将它们的两个CSS display
值都设置为none
,如下所示:
<div class="iframes">
<iframe allowfullscreen style="display: none" frameborder="0" height="300" width="480" name="frame1" src="http://example.com"></iframe>
<iframe allowfullscreen style="display: none" frameborder="0" height="300" width="240" name="frame2" src="http://thedragonring.me"></iframe>
</div>
然后,在其<button>
属性中添加一些带有小脚本的onclick
,这将切换是否将相应display
的{{1}}属性设置为{{1 }}或<iframe>
,如下所示:
none
或者,您可以添加一个按钮来在2个iframe之间切换:
block
基本上,JS的所有这些摘要都与目标<div class="buttons">
<button onclick="
const el = document.querySelector('.iframes [name=frame1]');
el.style.display = el.style.display === 'none' ? '' : 'none';
">
Frame 1 (example.com)
</button>
<button onclick="
const el = document.querySelector('.iframes [name=frame2]');
el.style.display = el.style.display === 'none' ? '' : 'none';
">
Frame 2 (thedragonring.me)
</button>
</div>
的{{1}}属性相反。您可以在http://jsfiddle.net/TheDragonRing/4bzrvnyh/上观看演示