JS实现品字布局

在网页后台中常用的布局是头部+侧边栏的形式

为了省去多于代码和重复修改多个页面

头部和侧边栏都是共用的，一直不改变的，所以写死在页面中。

中间的内容根据点击而发生改变，所以用iframe包起来

如何实现呢

侧边栏的链接示例

<a class="J_menuItem" href="form_basic.html">基本表单</a>

 用于包裹中间内容的iframe

<iframe id="J_iframe" width="100%" height="100%" src="form_basic.html" frameborder="0" data-id="index_v1.html" seamless=""></iframe>

 当点击侧边栏的时候，我们不让链接跳转，而用JS改变frame的src就能实现了

 

$(function(){
    //菜单点击
    $(".J_menuItem").on('click',function(){
        var url = $(this).attr('href');
        $("#J_iframe").attr('src',url);
        return false;
    });
});