前端页面切换

在Javaweb开发中,页面切换是必不可少的一个技术,简单模拟一个

工具:Hbuilder

技术:HTML+JQuery

话不多说先看效果图:

目录结构图:

主页:index.html

	
		
		
		
	
	
		

			

				大前端页面切换
			
			

			
			

			
		
	
	
	

one.html:

Jadeon one

two.html

Jadeon two

three.html

Jadeon three

重要代码:index.js

var obj_span_href = new Array(
	'one  '
	,'two  '
	,'three');
var contL = $('.left-container');
contL.append(obj_span_href);
//全局监听a click事件
var cont = $('.container');
var contR = $('.left-container', cont);
var _loading, page;
contR.on('click', 'a', function(){
	if(_loading)
		return;
	
	_loading = true;
	page = $(this).data('page');
	
	if(!page)
	return;
	
	$('a.active', contR).removeClass('active');
	$(this).addClass('active');

	$('.right-container', cont).empty().load(page, function(){
		_loading = false;
	})
});
$('a.active').click();