<!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(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>