我目前尝试使用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>
问题是只有“页面”中的内容可见,其他所有内容都是隐身的,如下面的屏幕截图所示:
据我所知,代码也正确加载,Javascript插件会导致吗?如何正确加载代码?
我希望有人可以帮助我。 格尔茨,