Question

请仔细阅读HTML文件代码。
这里我试图使用jQuery的切换功能。在这里，我对“content.HTML”页面的切换工作正常。
当我点击任何图像或按钮时，我需要完全隐藏“topFrame”，当我再次点击它时取消隐藏它。

请在我犯错的地方帮助我。我已经做了很多努力来实现这个目标，但我无法做到。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
    <html>
    <head>
    <title>Frameset Example Title (Replace this section with your own title)</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    </head>

    <frameset rows="10%,90%" border="0" name="FrameName">   
    <frame  name="topFrame" src="menu_1.html" target="right"></frame>
    <frame name="menu" src="content.html" target="_self"></frame>

    <noframes>
    //....
    </noframes>

    </frameset>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
         $('frame[name="topFrame"]').fadeToggle("slow");
        $("#top").toggle();
      });
    });
    </script>
    </html>

content.html

<html>
<head>
<title>HTML Frames Example - Content</title>
<style type="text/css">
body {
    font-family:verdana,arial,sans-serif;
    font-size:10pt;
    margin:30px;
    background-color:#ffcc00;
    }
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>


</head>
<body>
<h1>Content</h1>
<br>

<button id="button1">Toggle 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>

<script>
$('button').on('click',function(){
     $( "p" ).toggle( "slow" );
      $( "h1" ).toggle( "slow" );
});
</script>

</body>
</html>

menu_1.html

<html>
<head>
<title>HTML Frames Example - Menu 1</title>
<style type="text/css">
body {
    font-family:verdana,arial,sans-serif;
    font-size:10pt;
    margin:10px;
    background-color:#ff9900;
    }
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
(function(){
    $('img, button').on("click" , function (e) {
        $('p').toggle();
    });
});
</script>
</head>
<body>
<h3>Menu 1</h3>
<p><a href="white.html" target="content">White Page</a></p>
</body>
</html>

Answer 1

您可以在内容框架中切换按钮，并希望隐藏切换按钮的菜单框。

问题是您无法从子框架访问父级中存在的javascript函数，因此需要做一些解决方法，如下所示：

在父级中添加一个事件监听器并调用切换框架功能（框架不能使用css的display属性直接隐藏或显示，因此添加了两个单独的函数）：

........

    <frameset rows="10%,90%" border="0" name="FrameName">   
    <frame  name="topFrame" src="menu_1.html" target="right"></frame>
    <frame name="menu" src="content.html" target="_self"></frame>

    <noframes>
    //....
    </noframes>

    </frameset>
    <script>
        var origCols = null;
        function receiveMessage(event)
        {
          if(origCols!=null)
           showFrame()
          else
           hideFrame();
        }

        addEventListener("message", receiveMessage, false);

        function hideFrame() {
            var frameset = document.getElementById("frameSet");
            origCols = frameset.rows;
            frameset.rows = "0, *";
        }

        function showFrame() {
            document.getElementById("frameSet").rows = origCols;
            origCols = null;
        }
        </script>
    </html>

现在点击下面的按钮点击：

<button id="button1" onclick="parent.postMessage('button1 clicked', '*');">
Toggle 'em</button>

Answer 2

尝试使用ID 这是一个简短的例子..

<div><a id="thumbnail">Click here to Show/Hide Thumbnail</a></div>
<div id="showhide"> Your Content to hide or show </div>

<script type="text/javascript">
   $('#thumbnail').click(function() {
     $('#showhide').toggle();
   });
</script>

使用Javascript或Jquery完全隐藏框架集中的框架

2 个答案: