在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> '
,'<a href="javascript:void(0);" class="active" data-page="page/two.html">two</a> '
,'<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();