在html框架中向下滑动菜单

时间:2014-06-04 04:29:03

标签: javascript jquery html html5 frames

我希望html中的框架中的向下滑动菜单,当用户点击顶部框架中的按钮时,它应该向下滑动我怎么能创建框架

<!-- frameset is deprecated in html5, but it still works. -->
    <frameset framespacing="0" rows="40,*,15" frameborder="1" noresize>
        <frame name="top" src="http://www.yahoo.com" target="top"></frame>
        <frame name="main" src="http://www.google.com" target="main"></frame>
        <frame name="bottom" src="http://www.facebook.com" target="bottom"></frame>
    </frameset>  

我的要求是这样的:

  

http://jsbin.com/EkAweqA/1

但我想在框架中实施

2 个答案:

答案 0 :(得分:0)

框架对HTML5无效。现在,已经引入了iframe。 您需要为每个iframe添加一个按钮以显示onclick。以下是按钮和iframe的代码 -

<button id ="b1" type="button">Click Me for Yahoo!</button>
<iframe id="yahoo" src="http://www.yahoo.com"></iframe><br>

<button id ="b2" type="button">Click Me for Google!</button>
<iframe id="google" src="http://www.google.com"></iframe><br>

<button id ="b3" type="button">Click Me for Facebook!</button>
<iframe id="facebook" src="http://www.facebook.com"></iframe><br>

现在你需要在最初的页面加载时隐藏这些iframe。然后它们将出现在按钮单击上。

$(document).ready(function(){
    $("#yahoo").hide();
    $("#google").hide();
    $("#facebook").hide();
        $("#b1").click(function(){
            $("#yahoo").show();
        });

    $("#b2").click(function(){
            $("#google").show();
        });


    $("#b3").click(function(){
            $("#facebook").show();
        });
});

答案 1 :(得分:0)

此代码也适用于帧。我检查过。就试一试吧。 :)