jquery - 滑动iframe隐藏div

Question

我的页面有左侧菜单和右侧内容的链接。 当点击内容中的链接时，我需要一个iframe加载链接中的内容，然后出现，以便它覆盖具有内容的右侧div。

这个iframe在不需要时应该被最小化，并且应该看起来像一个底部的栏，它总是浮动的，当它到达底部时，它应该在页脚栏上方可见。

任何人都可以告诉我如何做到这一点。如果提供例子会好得多。

感谢， 桑迪普

进出口安装了什么我想演示布局。

Answer 1

如果你组织你的右侧的内容与一个包含分区，且该分区中作出这样握着你的常规内容和一个iframe嵌套式div;然后你可以设置单击处理你的链接，将隐藏div嵌套，并显示在iframe：

$(document).ready(function() { 
    $('#inner_div > a').live('click', function() { 
     $('#inner_div').slideUp();//just an example animation, you can set whatever attributes you would like with jquery, like just change the height with .css({height: '0px'}) 
     $('#iframe_id').slideDown(); 
    }); 
}); 
<div id="outer_div"> 
    <div id="inner_div"> 
     <a href="some_link.html" target="iframe_id">Link Text</a> 
    </div> 
    <iframe id="iframe_id" style="display:none;"></iframe> 
</div> 

---- ----编辑

至于附着于底部的浮动栏页：

<div id="floating_footer" style="position: absolute; bottom: 0px; right: 0px; width: 90%; height: 50px; background-color:#069;"></div> 

如果你想隐藏这个“浮动DIV”当iframe中显示出来，只需添加下面的JavaScript代码（右与其他效果基本show /了slideDown代码）：

$('#floating_footer').slideUp();