JavaScript函数不会加载html页面

Question

我一直在为此挣扎两天。这个JavaScript应该在加载时加载我的home.html页面，然后在点击链接时加载我的其他页面。即使主页也不会加载。对我来说没有任何意义，为什么没有加载。任何人都可以看到我的错误在哪里？

JAVASCRIPT：

$(document).ready(function(){ 

     setOrientationListener(); 

    changePage('home.html?v=1'); 

    $('nav a').on('click', function(){ 
     $('nav a').removeClass('selected'); 
     $(this).addClass('selected'); 
    }) 
}); 

function changePage(fileName){ 

    $('.content_container').animate({opacity:0}, 500, function(){ 
     $('.content_loading_container').load('assets/content/'+fileName, function(){ 
      $('.content_container').delay(250).animate({opacity:1}, 500); 
     }); 
    }); 
} 

CSS：

/* Global Styles */ 
body { margin: 0px; padding: 0px; font-family: Helvetica; font-size: 16px; background- color: #ddd;} 


/* Global Layout */ 

header { display: block; position: absolute; top: 0px; left: 0px; height: 55px;  background: url(../images/template/background_banner.jpg?v=1) no-repeat 0px 0px; -webkit-box- shadow: 0px 5px 4px rgba(122,122,122,0.8); box-shadow: 0px 5px 4px rgba(122,122,122,0.8); } 
article { display: block; position: absolute; top: 55px; left: 0px; background:  url(../images/template/background_content.jpg?v=1) repeat-x 0px 0px; } 
article .content_container { position: absolute; bottom: 30px; left: 0px; background: none; } 
article .content_container .content_loading_container { position: absolute; bottom: 30px;  padding: 40px 20px 0px 40px; } 
footer { display: block; position: absolute; bottom: 0px; left: 0px; height: 30px; background-color: #ffb91d; } 
nav { position: absolute; top: 70px; left: 25px; } 

.banner_logo { position: absolute; top:0px; left:0px; } 

.engine_image, .commercial_image, .military_image, .uav_image { -webkit-transition: -webkit-transform 1s ease-in-out; } 

.engine_image { position: absolute; -webkit-transform: translate3d(1400px,200px,0px); } 
.commercial_image { position: absolute; -webkit-transform: translate3d(-500px,1400px,0px); } 
.military_image { position: absolute; -webkit-transform: translate3d(-700px,200px,0px); } 
.uav_image { position: absolute; -webkit-transform: translate3d(-10px,-800px,0px); } 

.icon { -webkit-border-radius:15px; -webkit-box-shadow:0 5px 10px 0 #aaaaaa; } 

nav a { padding: 5px 5px 15px 5px; background-color:#ffffff; background-position: 0px 0px; background-repeat; } 
nav a.selected { background-color: #ffb91d; repeat-y 0px 0px; } 

/* Page-specific Style and Layout */ 
.page.home article .content_container { background: url(../images/template/background_content_home.jpg?v=1) no-repeat 0px 0px; } 

/* Orientation-specific Layout - Landscape */ 
.page.landscape { position: relative; width: 1024px; height: 748px; overflow: hidden; } 
.page.landscape header { width: 1024px; } 
.page.landscape article { width: 1024px; height: 663px; } 
.page.landscape footer { width: 1024px; } 

.page.landscape article .content_container { width: 1024px; height: 663px; } 

.page.landscape.home .engine_image { position: absolute; -webkit-transform: translate3d(800px,150px,0px); } 
.page.landscape.home .commercial_image { position: absolute; -webkit-transform: translate3d(600px,500px,0px); } 
.page.landscape.home .military_image { position: absolute; -webkit-transform: translate3d(700px,375px,0px); } 
.page.landscape.home .uav_image { position: absolute; -webkit-transform: translate3d(700px,210px,0px); } 

/* Orientation-specific Layout - Portrait */ 
.page.portrait { position: relative; width: 768px; height: 1004px; overflow: hidden; } 
.page.portrait header { width: 768px; } 
.page.portrait article { width: 768px; height: 919px; } 
.page.portrait footer { width: 768px; } 

.page.portrait article .content_container { width: 768px; height: 919px; } 

.page.portrait.home .engine_image { position: absolute; -webkit-transform: translate3d(550px,380px,0px); } 
.page.portrait.home .commercial_image { position: absolute; -webkit-transform: translate3d(350px,730px,0px); } 
.page.portrait.home .military_image { position: absolute; -webkit-transform: translate3d(430px,550px,0px); } 
.page.portrait.home .uav_image { position: absolute; -webkit-transform: translate3d(450px,150px,0px); } 

HTML：

<html> 
    <head> 

     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> 
     <meta name="apple-mobile-web-app-capable" content="yes" /> 
     <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
     <link type="text/css" rel="apple-touch-icon-precomposed" href="assets/images/template/icon.png?v=1" /> 
     <link type="text/css" rel="apple-touch-startup-image" href="assets/images/template/startup_landscape.jpg?v=1" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" /> 
     <link type="text/css" rel="apple-touch-startup-image" href="assets/images/template/startup_portrait.jpg?v=1" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" /> 
     <link rel="stylesheet" type="text/css" href="assets/includes/bom.css?v=1" /> 
     <script type="text/javascript" src="assets/includes/jquery-1.7.1.min.js"></script> 
     <script type="text/javascript" src="assets/includes/Iscroll4/iscroll.js"></script> 
     <script type="text/javascript" src="assets/includes/bom.js?v=1"></script> 
    </head> 
    <body> 
     <div class="page home"> 
      <footer></footer> 
      <article> 
       <div class="content_container"> 
        <div class"content_loading_container"></div> 
       </div> 
      </article> 
      <header></header> 
      <img class="banner_logo" src="assets/images/template/logo.png?v=1" /> 
      <img class="engine_image" src="assets/images/template/engine.png?v=1" width="200" height="153" />   
      <img class="commercial_image" src="assets/images/template/A380.png?v=1" width="400" height="194" />   
      <img class="military_image" src="assets/images/template/f-35.png?v=1" width="300" height="157" />   
      <img class="uav_image" src="assets/images/template/uav.png?v=1" width="300" height="196" /> 
      <nav> 
       <a data-file="engines.html?v=1"><img class="icon" src="assets/images/template/icon_engine.png?v=1" width="68" height="57" /></a> 
       <a data-file="general.bus.html?v=1"><img class="icon" src="assets/images/template/icon_gen.bus.png?v=1" width="68" height="57" /></a> 
       <a data-file="helicopters.html?v=1"><img class="icon" src="assets/images/template/icon_helicopter.png?v=1" width="68" height="57" /></a> 
       <a data-file="commercial.html?v=1"><img class="icon" src="assets/images/template/icon_commercial.png?v=1" width="68" height="57" /></a> 
       <a data-file="military.html?v=1"><img class="icon" src="assets/images/template/icon_military.png?v=1" width="68" height="57" /></a> 
       <a data-file="military.ground.html?v=1"><img class="icon" src="assets/images/template/icon_military-ground.png?v=1" width="68" height="57" /></a> 
       <a data-file="missiles.html?v=1"><img class="icon" src="assets/images/template/icon_missile.png?v=1" width="68" height="57" /></a> 
       <a data-file="regional.html?v=1"><img class="icon" src="assets/images/template/icon_regional.png?v=1" width="68" height="57"/></a> 
       <a data-file="uav.html?v=1"><img class="icon" src="assets/images/template/icon_uav.png?v=1" width="68" height="57" /></a> 
      </nav> 
     </div> 
    </body> 
</html> 

Answer 1

'assets/content/'+fileName shoudnt将其更改为'/assets/content/'+fileName

也I C应该在你的html中发现一个错误 <div class"content_loading_container"></div>应该是<div class="content_loading_container"></div>