0

我已经为此苦苦挣扎了两天。此 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>
4

1 回答 1

1

'assets/content/'+fileName你应该把它改成'/assets/content/'+fileName

我也可以在你的 html 中找到一个错误 <div class"content_loading_container"></div>应该是<div class="content_loading_container"></div>

于 2013-05-09T15:53:28.847 回答