<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="javascript" />
<meta name="description" content="Helloweba演示平台，演示XHTML、CSS、jquery、PHP案例和示例" />
<title>演示：Javascript实现前端简单路由</title>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
.text-right li{padding: 10px}
#result{height: 200px; line-height: 200px; font-size: 2rem; text-align: center; color:#fff;}
</style>
</head>
<body>
<div class="container">
<div class="row main" style="min-height:500px">
<div class="col-md-12">
<div class="row" style="margin-top:30px">
<div class="col-md-3">
<ul class="text-right">
<li><a href="#/">首页</a></li>
<li><a href="#/product">产品</a></li>
<li><a href="#/server">服务</a></li>
</ul>
</div>
<div class="col-md-7">
<div id="result"></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function Router(){
this.routes = {};
this.curUrl = '';
this.route = function(path, callback){
this.routes[path] = callback || function(){};
};
this.refresh = function(){
this.curUrl = location.hash.slice() || '/';
this.routes[this.curUrl]();
};
this.init = function(){
window.addEventListener('load', this.refresh.bind(this), false);
window.addEventListener('hashchange', this.refresh.bind(this), false);
}
}
var R = new Router();
R.init();
var res = document.getElementById('result');
R.route('/', function() {
res.style.background = 'blue';
res.innerHTML = '这是首页';
});
R.route('/product', function() {
res.style.background = 'orange';
res.innerHTML = '这是产品页';
});
R.route('/server', function() {
res.style.background = 'black';
res.innerHTML = '这是服务页';
});
</script>
</body>
</html>