我已经为此苦苦挣扎了两天。此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>
最佳答案
'assets/content/'+fileName应该将其更改为'/assets/content/'+fileName
我也可以在您的html中找到错误<div class"content_loading_container"></div>应该是<div class="content_loading_container"></div>
关于javascript - JavaScript函数无法加载html页面，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16465859/