您的位置：首页 > Web前端 > JavaScript

Javascript实现前端简单路由

2017-02-15 01:58 555 查看

<!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="" />
<title></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">
<header>
<div class="row">
<div class="col-md-3 col-xs-12"><h1 class="logo"><a href="#" title="返回helloweba首页">helloweba</a></h1></div>
<div class="col-md-9 text-right"></div>
</div>
</header>
<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>

<footer>

</footer>
</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(1) || '/';
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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航