jQuery:加载的HTML是不可见的

时间:2014-11-13 13:18:31

标签: javascript jquery html

我目前尝试使用jQuery和此代码将HTML代码加载到div中:

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

我的按钮在这里:

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

我的div下面

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

最后但并非最不重要的是startjourney2.html中的代码

<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>

问题是只有“页面”中的内容可见,其他所有内容都是隐身的,如下面的屏幕截图所示:

enter image description here

据我所知,代码也正确加载,Javascript插件会导致吗?如何正确加载代码?

我希望有人可以帮助我。 格尔茨,

0 个答案:

没有答案