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数据为
index.html<a href="javascript:void(0);" onclick="loadXMLDoc('member.html')">查看用户</a><div id="mainbody">欢迎登录!</...
index.html
查看用户欢迎登录!
index.html中的Ajax代码
function loadXMLDoc(url) { var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("mainbody").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET",url,true); xmlhttp.send(); }
执行效果前的页面展示:
点击查看用户执行js后的页面:
左边功能菜单(left.html) 右边内容(content*.html) main.html DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Frameset//EN""http://www.w3.org/TR/html4/frameset.dtd">html>
使用frameset实现
主框架(main.html)左右两框
左边功能菜单(left.html)
右边内容(content*.html)
main.html