我刚刚完成线框图制作,需要动态更改页面的主要部分,该部分是div class =“ container”,其中页面的切片部分表示将注入index.html的其他内容
请查看图片:http://i.stack.imgur.com/IYiTn.jpg
单击上面的链接时,红色部分需要与其他.html动态交换。蓝色的静态部分会停留。
<!doctype html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="apple-touch-icon" href="apple-touch-icon.png"> <link rel="stylesheet" href="css/bootstrap.min.css"> <style> body { padding-top: 5%; } </style> <link rel="stylesheet" href="css/bootstrap-theme.min.css"> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" type="text/css" href="dist/css/slider-pro.css" media="screen"/> <link rel="stylesheet" type="text/css" href="css/examples.css" media="screen"/> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'> <script type="text/javascript" src="libs/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="dist/js/jquery.sliderPro.min.js"></script> <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script> </head> <body> <!--[if lt IE 8]> <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]--> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><big>Chris Kalmar</big> <small>portfolio</small></a> </div> </div> </nav> <div class"container-fluid"> <div class"row"> <div class"col-xs-6"> <ul> <li class="branding"><a href="#brand">Branding</a></li> <li class="3d"><a href="#3d">3D</a></li> <li class="Apps"><a href="#app">Apps</a></li> </ul> </div> </div> </div> <div class="container"> <!-- ajax call--> <!-- /ajax call--> </div><!-- / container--> <footer> <p>Chris Kalmar - All rights reserved 2015</p> </footer> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script> <script src="js/vendor/bootstrap.min.js"></script> <script src="js/plugins.js"></script> <script src="js/main.js"></script> <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> <script> (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]= function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date; e=o.createElement(i);r=o.getElementsByTagName(i)[0]; e.src='//www.google-analytics.com/analytics.js'; r.parentNode.insertBefore(e,r)}(window,document,'script','ga')); ga('create','UA-XXXXX-X','auto');ga('send','pageview'); </script> <script> $(document).ready(function(){ var router = { "#brand" : "http://www.chriskalmar.com/branding.html", "#3d" : "http://www.chriskalmar.com/3d.html", }; $(window).on("hashchange", function(){ var route = router[location.hash]; if (route === undefined) { return; } else { $(".container").load( "" + route + " #content" ); } }); }); </script> </body> </html>
通常,我要做的是创建一个路由处理程序,该路由处理程序包含映射到url的url哈希。这样,当我监听窗口的hashchange事件时,可以路由到该哈希的相应URL。该对象将如下所示:
var router = { "#ajax" : "http://fiddle.jshell.net" };
然后,我使用此对象通过路由器和jquery get请求(在hashchange上)从URL异步获取html:
$(window).on("hashchange", function(){ var route = router[location.hash]; if (typeof route === 'undefined') return; $.get( route, function( data ) { $( ".sliderContent" ).html( data ); }); });
从jquery get的回调中可以看到,检索到的ajax数据被注入到sliderContent div中的DOM中。我希望这有帮助 :)
在此处查看有效的jsfiddle:http://jsfiddle.net/zrLLhq30/5/
编辑:AJAX需要一些时间来处理,所以给它一点时间来加载。
更新
我已经更新了小提琴,使其包含多个链接(以及将jquery替换get为jquery load,只是为了加快资源检索的速度),并且如您所见,divs中的内容无需页面刷新即可加载到容器中。
get
load
如果按照我的方式实施解决方案,并且为每个资源URL使用不同的哈希,那么它应该会很好用。我希望这就是你的意思:)
在此处更新了jsfiddle:http : //jsfiddle.net/zrLLhq30/7/