我想实现页面之间的转换,就像这里我尝试过这个解决方案,但它对我的不起作用
我的index.php:
<?php include_once("header.php") ?>
<?php include_once("main.php") ?>
<?php include_once("footer.php") ?>
在header.php中,我有导航栏
<div id="menu">
<ul class="nav text-center">
<li<?php if($file == 'index.php'){ ?> id="button" class="active" <?php }?>><a href="/test2" title=""><i style="color:#fafafa" class="fa fa-home fa-2x"></i></a></li>
<li<?php if($file == 'onas.php'){ ?> id="button" class="" <?php }?>><a href="onas" title="O nas"><i style="color:#fafafa" class="fa fa-child fa-2x" ></i></a></li>
<li<?php if($file == 'sklepy.php'){ ?> id="button" class="" <?php }?>><a href="sklepy" title=""><i style="color:#fafafa" class="fa fa-shopping-cart fa-2x" ></i></a></li>
<li<?php if($file == 'kontakt.php'){ ?> id="button" class="" <?php }?>><a href="kontakt" title="Kontakt"><i style="color:#fafafa" class="fa fa-envelope-o fa-2x" ></i></a></li>
<li<?php if($file == 'uslugi.php'){ ?> id="button" class="" <?php }?>><a href="uslugi" title=""><i style="color:#fafafa" class="fa fa-cog fa-spin fa-2x" ></i></a></li>
</ul>
</div>
我想加载的示例页面如下:
<?php include_once("header.php") ?>
<div style="color:#fafafa; background-color:#1D1A21">
<div class="container" id="uslugi">
xyx
</div>
</div>
<?php include_once("footer.php") ?>
这是我的页面:样本
我该如何实现这个动画?有什么例子、教程吗?
您需要ajax来实现它像这样的
$('.scrollableArea a').on('click', function(e) {
e.preventDefault();
var url = $(this).attr('href');
$.ajax({
url: url,
success: function(data) {
$('#navlist').fadeOut(function() {
$(this).html(data);
$(this).fadeIn();
});
}
});
});