在网页后台中常用的布局是头部+侧边栏的形式
为了省去多于代码和重复修改多个页面
头部和侧边栏都是共用的,一直不改变的,所以写死在页面中。
中间的内容根据点击而发生改变,所以用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;
});
});