万能的路由在一个网站上看到的实现局部加载

来源：互联网发布：sql case when怎么用编辑：程序博客网时间：2024/06/06 05:06
<!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"><link rel="stylesheet" type="text/css" href="../../css/demo.css"><style>.text-right li{padding: 10px}#result{height: 200px; line-height: 200px; font-size: 2rem; text-align: center; }</style></head><body><div class="container">   <header>      <div class="row">         <div class="col-md-3 col-xs-12"><h1 class="logo"><a href="http://www.helloweba.com" 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">         <h2 class="top_title"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span><a href="http://www.helloweba.com/view-blog-385.html">Javascript实现前端简单路由</a></h2>                  <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>      <p>Powered by helloweba.com  允许转载、修改和使用本站的DEMO，但请注明出处：<a href="http://www.helloweba.com">www.helloweba.com</a></p>   </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();</script><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script>   R.route('/', function() {      //跳转第一页      $("#result").load("./demo1.html",function (data) {         $(this).html(data)      })   });   R.route('/product', function() {      //跳转第二页      $("#result").load("./demo2.html",function (data) {         $(this).html(data)      })   });   R.route('/server', function() {      //跳转第3页      $("#result").load("./demo3.html",function (data) {         $(this).html(data)      })   });</script></body></html>
阅读全文
0 0
万能的路由 在一个网站上看到的 实现局部加载

万能的路由在一个网站上看到的实现局部加载
