0

我的 main.jsp 页面有两个框架，这里的代码是

 <body>
<div><a href="#" onClick="somthingJS();"> hide</a></div>
<table>
<tr>
    <td style="height:100%"><iframe name="leftFrame" id="leftFrame" src="leftnavigation.jsp" height="600" width="200" frameborder="0"></iframe></td>

    <td style="height:100%"><iframe name="mainFrame" id="mainFrame" src="news.jsp"  height="600" width="1000" frameborder="0" scrolling="auto"> </iframe></td>
</tr>       
</tr>   

</table>
</body>

我需要隐藏我的leftFrame。在隐藏标签上，onclick 方法做一些事情来隐藏我的 iframe
，但不是所有它必须使用 Jquery 隐藏高达 90% 如何通过单击隐藏来隐藏和显示..

提前致谢.....

4

5 回答 5

1

如果您想“隐藏最多 90” - 不透明度更改为 20%？然后：在这里
使用jquery.fadeTo
是工作代码：http: //jsfiddle.net/rnAyh/

如果你想改变你可以检查这个：http: //jsfiddle.net/rnAyh/1/

于 2012-08-30T13:24:04.103 回答
0

只需更改 iframe 的宽度？

(function() {
  var toggle = false,
      frames = [document.getElementById('leftFrame'),document.getElementById('mainFrame')];
  window.somethingJS = function() {
    frames[0].setAttribute("width",toggle ? 200 : 20);
    frames[1].setAttribute("width",toggle ? 1000 : 1180);
    toggle = !toggle;
  };
})();
于 2012-08-30T13:21:58.190 回答
0

我不确定我是否完全理解你想要做什么，但从标题来看，在我看来你想剪辑一个 iframe。试试 CSS iframe 属性。

.iframe-to-crop {
    clip: rect(0px,50px,0px,0px);
}

这将“切断”iframe 右侧的 50 像素。看看这个。

于 2012-08-30T13:26:03.913 回答
0

您可以将左框架的样式更改为opacity: 0.1- 只需更改somethingJS();为

document.getElementById('leftFrame').style.opacity = 0.1;
于 2012-08-30T13:28:00.747 回答
0

下面的代码应该找到我的内联评论以进行解释。

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script> 
           /*
            attr() if element height is needed if set, 
            css() if style element used
            */

            function somethingJS(){
                var iHeight=$('#leftFrame').attr("height");
               iHeight=(!isNaN(iHeight))?600:iHeight;
               $('#leftFrame').attr("height",iHeight-iHeight*(90/100));
            }

        </script>
    </head>
<body>
    <div>
        <!-- In your original code href="#" will create problems in IE , so either attach the event in jquery onload or use the below code -->    
        <a href="javascript:void(0)" onClick="somethingJS()"> hide</a>    
    </div>
<table>
<tr>
    <td style="height:100%"><iframe name="leftFrame" id="leftFrame" src="12197789.html" height="600" width="200" frameborder="1"></iframe></td>

    <td style="height:100%"><iframe name="mainFrame" id="mainFrame" src="12197789.html" height="600" width="1000" frameborder="1" scrolling="auto"> </iframe></td>
</tr>       
</table>
</body>
</html>
于 2012-08-30T14:32:49.427 回答