JQuery没有显示动态内容

Question

我的导航包含的产品可供用户点击以查找更多信息。然后使用jquery在动态下显示每个产品的信息。 jquery应该从链接页面的#guts标记中获取内容，并在用户选择了他们想要查看的内容后将其加载到主页面中。出于某种原因，当我尝试这样做时，div会四处移动，但不会加载任何内容。

这是我的HTML：

          <div id="page-wrap" style="margin-top:0px;">
                <header>
                    <nav id="printProducts">
                        <ul>
                            <li><a href="../php/businessCards.php">Business Cards</a> </li>
                            <li><a href="../php/letterheads.php">Letterheads</a></li>
                            <li><a href="../php/leaflets.php">Leaflets</a></li>
                            <li><a href="print.html">Home</a></li>
                        </ul>
                    </nav>
            </header>
                <section id="main-content">
                    <div id="guts" style="height:300px;background-color:#999999;">
                        <p>We specialise in business stationery from your everyday business cards through to complex brochures, leaflets, forms, pads and exhibition products. </p><br/>

                </section>
        </div>

这是jquery：

$(function() {

var newHash      = "",
    $mainContent = $("#main-content"),
    $pageWrap    = $("#page-wrap"),
    baseHeight   = 0,
    $el;

$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();

$("nav").delegate("a", "click", function() {
    window.location.hash = $(this).attr("href");
    return false;
});

$(window).bind('hashchange', function(){

    newHash = window.location.hash.substring(1);

    if (newHash) {
        $mainContent
            .find("#guts")
            .fadeOut(200, function() {
                $mainContent.hide().load(newHash + " #guts", function() {
                    $mainContent.fadeIn(200, function() {
                        $pageWrap.animate({
                            height: baseHeight + $mainContent.height() + "px"
                        });
                    });
                    $("nav a").removeClass("current");
                    $("nav a[href="+newHash+"]").addClass("current");
                });
            });
    };

});

$(window).trigger('hashchange');

});

与jquery.ba-hashchange.min.js一起

这是我的Css;

        #page-wrap{width:400px;
        margin:40px auto 5px;
        background:#fffff;
        padding:8px;
        background:-webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
        margin-top:60px;
        background:-moz-linear-gradient(top, #eee, #ccc);
        -webkit-border-radius:16px;
        -moz-border-radius:16px;}

        #main-content{padding:0px;
        margin-bottom:40px;}

        #printProducts{float:left;
            list-style:none;
            text-align:center;
            margin-top:0px;
            margin-bottom:20px;
            width:100%;
            margin-left:0%;
            display:inline}

        #printProducts ul li{display:inline;
                clear:both;}

        #printProducts a{display:inline-block;
            *display:inline;
            padding-top:.7em;
            padding-left:.3em;
            padding-right:.3em;
            padding-bottom:.5em;
            text-decoration:none;
            color:#fff;
            background:#be0d34;font-family:Arial, Helvetica, sans-serif;font-size:14px;width:145px;height:9.765625%;float:left;border-left-color:#FFFFFF;border-left-width:thin;border-left-style:solid;border-top-color:#FFFFFF;border-top-width:thin;border-top-style:solid;-webkit-box-shadow:0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);-moz-box-shadow:0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);box-shadow:0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);position:relative;}
            #printProducts a:hover{background:#FFFFFF;color:#be0d34;}
            #guts{padding-left:10px;padding-right:10px;}

所有帮助都很棒。