Javascript jQuery:加载的HTML是不可见的

我目前尝试使用jQuery将HTML代码加载到div中，代码如下：

<script language="javascript">
   $(function(){
      $(".loadmain").click(function(){
         $("#main-content").load("startjourney2.html");
      });
   });
</script>

$（函数（）{
$（“.loadmain”）。单击（函数（）{
$（“#主要内容”）.load（“startjourney2.html”）；
});
});

我的按钮在这里：

<a class="loadmain">Play</a>

显露
97%-上次播放时间：2014年11月12日上午7:54。


空的
0%

问题在于，只有“页面侧”中的内容可见，其他所有内容都不可见，如下面的屏幕截图所示：

就我所见，代码也被正确加载，Javascript插件会导致这种情况吗？如何正确加载代码

我希望有人能帮助我。

---

Greetz，

startjourney2.html是否通过直接访问正确显示？是。当我手动将代码放入div时，它可以工作。@SalmanA检查器在主div中向我显示journey2.html的代码。不可见或仅在黑色背景上显示黑色文本？不可见。当我试图在inspector中更改字体颜色时，我看不到它。

<div id="main-content" class="abs dark-template">

<div class="page-wrapper">

    <!--Page sidebar-->
    <div class="page-side">
        <div class="inner-wrapper vcenter-wrapper">
            <div class="side-content vcenter">
                <div class="title">
                    <span class="second-part">Start your</span>
                    <span>Journey</span>
                </div>
                <p>Some text goes here</p>
            </div>
        </div>
    </div>
    <!--/Page sidebar-->

    <!--Page main content-->
    <div class="page-main">
        <!-- services wrapper -->
        <div class="vertical-folio">

            <!-- services Item -->
            <div class="vf-item tj-hover-3 set-bg inview-animate inview-fadeleft">

                <img src="assets/img/portfolio/horizontal/city1.jpg" alt="alt" class="img-responsive">

                <!-- Item Overlay -->
                <div class="tj-overlay vcenter-wrapper">
                    <div class="overlay-texts vcenter">
                        <h3 class="title">Tracing Lines</h3>
                        <h4 class="subtitle">11 % - Last played: 27/08/2014 @ 11:59 p.m.</h4>
                        <br/>
                        <a href="startjourney.html#" class="btn btn-transparent">Continue Journey</a>
                        <a href="startjourney.html#" class="btn btn-toranj alt">Quit Journey</a>
                    </div>
                </div>
                <!-- /Item Overlay -->

            </div>
            <!-- /services Item -->

            <!-- services Item -->
            <div class="vf-item tj-hover-3 set-bg inview-animate inview-fadeleft">

                <img src="assets/img/portfolio/horizontal/city2.jpg" alt="alt" class="img-responsive">
                <!-- Item Overlay -->
                <div class="tj-overlay vcenter-wrapper">
                    <div class="overlay-texts vcenter">
                        <h3 class="title">Reveal</h3>
                        <h4 class="subtitle">97 % - Last played: 12/11/2014 @ 07:54 a.m.</h4>
                        <br/>
                        <a href="startjourney.html#" class="btn btn-transparent">Continue Journey</a>
                        <a href="startjourney.html#" class="btn btn-toranj alt">Quit Journey</a>
                    </div>
                </div>
                <!-- /Item Overlay -->

            </div>
            <!-- /services Item -->

            <!-- services Item -->
            <div class="vf-item tj-hover-3 set-bg inview-animate inview-fadeleft">

                <img src="assets/img/portfolio/horizontal/city3.jpg" alt="alt" class="img-responsive">

                <!-- Item Overlay -->
                <div class="tj-overlay vcenter-wrapper">
                    <div class="overlay-texts vcenter">
                        <h3 class="title">Empty</h3>
                        <h4 class="subtitle">0 %</h4>
                        <br/>
                        <a href="startjourney.html#" class="btn btn-toranj alt">Start Journey</a>
                    </div>
                </div>
                <!-- /Item Overlay -->

            </div>
            <!-- /services Item -->

        </div>
        <!-- /services wrapper -->
    </div>
    <!--/Page main content-->

</div>