Question

我有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 。在hide lable上onclick方法做一些事情来隐藏我的iframe
但并非所有它都必须使用Jquery隐藏高达90％我怎么能隐藏和通过点击隐藏显示..

提前致谢.....

Answer 1

如果你想“隐藏到90” - 不透明度变为20％？然后：
使用jquery .fadeTo
这是工作代码：http://jsfiddle.net/rnAyh/

如果您想随意改变，可以查看：http://jsfiddle.net/rnAyh/1/

Answer 2

只需更改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;
  };
})();

Answer 3

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

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

这将“切断”iframe右侧的50px。检查THIS。

Answer 4

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

document.getElementById('leftFrame').style.opacity = 0.1;

Answer 5

下面的代码应该在内容中找到我的评论以供解释。

<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>

在jquery中部分隐藏iframe

5 个答案: