js 点击侧边栏展示内容_左边菜单，点击左边右边内容改变

• 统计报表

  • 进货报表
  • 出货报表
  • 毛利报表

• 仓库管理

  • 商品列表
  • 盘点
  • 出库列表
  • 入库列表

• 订单管理

  • 订单列表
  • 采购申请

• 系统设置

  • 权限设置
  • 资料管理

• 修改密码

先写出一个上菜的菜单。 千万记住链接后面的target得要，而且名字需要一样，等会会用到

在内容的区域添加上面代码，插入iframe, 这里的name对应上面链接里面的name, src="index.html", 表示默认页是index.html, 至于后面的那些属性是控制iframe样式的。 以上iframe就告一段落了。

二. 用ajax方法实现点击左边， 右边出现相应的页面。

今年老大叫我做一个后台， 而且他指出别人没有用iframe, 问我行不行。 只能说行。 没有在网上查看过多的资料， 某天晚上突然想起ajax 里面有一个load方法， 这个方法可以载入其他页面的内容。 于是有了灵感， 开始也只是尝试一下：

("li").on('click', function() {

var href = $(this).find("a").attr('href');

$('#mainContents').empty();

$('#mainContents').load("../new/" + href);

//阻止跳转

$(this).parents('li').addClass('active').siblings('li').removeClass('active');

return false;

});

点击li, 找到li里面对应的链接地址，阻止url跳转，然后在内同区域载入找到的url对应的地址。 惊奇的发现，试验了也可行。 然而新问题来了。 用load方法，只能载入已经加载完毕的页面，如果我们的页面没有加载完毕呢， 或者修改了， 怎么办？？ 所以还是用ajax 吧。

var menu = $("#menuID>li h2"),

srcLi = menu.next('ul').find('li');

srcLi.on('click', function(e) {

var href = $(this).find("a").attr('href');

$('#mainContents').empty();

$.ajax({

// beforeSend: function(){

// $('#mainContents').html('正在请求');

// },

// complete: function(){

// $('#mainContents').html('加载完毕');

// },

type: "GET",

url: "../new/" + href,

success: function(data) {

$('#mainContents').append(data);

}

});

//阻止跳转

$(this).parents('li').addClass('active').siblings('li').removeClass('active');

return false;

});

menu.on('click', function() {

$(this).next('ul').slideToggle(400);

$(this).stop('false').toggleClass('on');

});

以上的思路， 和开始时候的load方法一样。首先找到每一个li 里面对应的url, 然后清空 右侧的内容， 用ajax动态获取不同的页面， 就追加到右侧的内容中。 阻止跳转。

另外，附上一个相似的代码，这是点击一个树状菜单出来不同的内容。第一次用ajax调用json数据。着实小兴奋了一把。这个与上面说的内容一毛钱的关系也没有，只是为了祭奠一下我的第一次而已

$.ajax({

type: "post",

url: "../new/txt/txt1.json",

dataType: "json",

success: function(data) {

$("#blank").empty();

var employees = data.employees;

$.each(data.employees, function(k, v) {

var tpl1 =

'

' + ' ' + v.职位 + ': ' + ' ' + v.姓名 + ';
' + '

';

$("#blank").append(tpl1);

});

}

})

调用的json数据为

{

"employees": [

{ "姓名": "张三", "职位":"php后台", "email": "aaaa" },

{ "姓名": "李四", "职位":"人事经理", "email": "bbbb" },

{ "姓名": "王五", "职位":"Harold", "email": "cccc" },

{ "姓名": "Isaac", "职位": "Asimov", "genre": "science fiction" },

{ "姓名": "Tad", "职位": "Williams", "genre": "fantasy" },

{ "姓名": "Frank", "职位": "Peretti", "genre": "christian fiction" },

{ "姓名": "Eric", "职位": "Clapton", "instrument": "guitar" },

{ "姓名": "Sergei", "职位": "Rachmaninoff", "instrument": "piano" }

],

"test": [

{ "姓名": "赵六", "职位":"php后台", "email": "aaaa" },

{ "姓名": "齐七", "职位":"人事经理", "email": "bbbb" },

{ "姓名": "王五", "职位":"Harold", "email": "cccc" },

{ "姓名": "Isaac", "职位": "Asimov", "genre": "science fiction" },

{ "姓名": "Tad", "职位": "Williams", "genre": "fantasy" },

{ "姓名": "Frank", "职位": "Peretti", "genre": "christian fiction" },

{ "姓名": "Eric", "职位": "Clapton", "instrument": "guitar" },

{ "姓名": "Sergei", "职位": "Rachmaninoff", "instrument": "piano" }

]

}