前端页面切换

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

工具:Hbuilder

技术:HTML+JQuery

话不多说先看效果图:

目录结构图:

主页:index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>大前端页面切换</title>
		<style>
			body{
				margin: 0px;
				padding: 0px;
				text-align: center;
				vertical-align: middle;
			}
			.container{
				width: 50%;
				height: 200px;
				background: #FFFFE0;
			}
			.container div{
				float: left;
			} 
			.top-container{
				width: 100%;
				line-height: 40px;
				border: 1px solid darkgoldenrod;
			}
			.left-container{
				width: 30%;
				line-height: 160px;
			}
			.right-container{
				width: 69%;
				line-height: 160px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="top-container">
				大前端页面切换
			</div>
			<div class="left-container">
			</div>
			<div class="right-container">
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery.min.js" ></script>
	<script type="text/javascript" src="js/index.js" ></script>
</html>

one.html:

<style>
	h1{
		color: purple;
	}
</style>
<h1>Jadeon one</h1>

two.html

<style>
	h1{
		color: orange;
	}
</style>
<h1>Jadeon two</h1>

three.html

<style>
	h1{
		color: blue;
	}
</style>
<h1>Jadeon three</h1>

重要代码:index.js

var obj_span_href = new Array(
	'<a href="javascript:void(0);" data-page="page/one.html">one</a>&nbsp;&nbsp;'
	,'<a href="javascript:void(0);" class="active" data-page="page/two.html">two</a>&nbsp;&nbsp;'
	,'<a href="javascript:void(0);" data-page="page/three.html">three</a>');
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();

猜你喜欢