我想实现这样的目标：
- 点击导航栏中的链接
- fadeOut网站的一部分
- 从链接加载页面
- 设置环绕动画以匹配新的场地高度
- fadeIn新内容
我在这里找到了一个巧妙的解决方案，但我的网站是以不同的方式构建的。
我的index.php:
<?php
include ('includes/header.php');
echo '<div id="wrapper">';
if ($_GET['page'] == 'about' ){
include 'includes/navbar.php';
include 'includes/about.php';
}else if ($_GET['page'] == 'login' ){
include 'includes/navbar.php';
include 'includes/login.php';
}else if ($_GET['page'] == 'register' ){
include 'includes/navbar.php';
include 'includes/register.php';
}else if ($_GET['page'] == 'member-index'){
include 'includes/navbar.php';
include 'includes/member-index.php';
}else if ($_GET['page'] == 'login-failed'){
include 'includes/navbar.php';
include 'includes/login-failed.php';
}else if ($_GET['page'] == 'logout'){
include 'includes/logout-exec.php';
include 'includes/navbar.php';
include 'includes/logout.php';
}else if ($_GET['page'] == 'register-success'){
include ('includes/navbar.php');
include 'includes/register-success.php';
}else if ($_GET['page'] == 'access-denied'){
include 'includes/navbar.php';
include 'includes/access-denied.php';
}else {
include ('includes/navbar.php');
include 'includes/home.php';
}
echo '</div>';
include ('includes/footer.php');
?>
我重新加载导航栏，因为如果会话存在，它会被更改。
导航栏.php
<?php
//Start session
session_start();
?>
<div id="navbar">
<div class="button"><a href="index.php">Home</a></div>
<?php
//Check whether the session variable SESS_MEMBER_ID is present or not
if(!isset($_SESSION['SESS_MEMBER_ID']) || (trim($_SESSION['SESS_MEMBER_ID']) == '')) {
echo '<div class="button"><a href="index.php?page=login">Login</a></div>';
echo '<div class="button"><a href="index.php?page=register">Register</a></div>';
} else {
echo '<div class="button"><a href="index.php?page=logout">Logout</a></div>';
}
?>
<div class="button"><a href="index.php?page=member-index">Member</a></div>
<div class="button"><a href="index.php?page=about">About</a></div>
</div>
我想加载的每个页面都包含div，我在其中包装所有其他页面元素，例如about.php：
<div id="mainbody">
<h1>*.php</h1>
</div>
我想用现在的网站建设方式来实现这篇文章开头描述的效果。在我提到的那个例子中，动态内容是通过使用.load((类加载的。也许我应该用不同的方式来构建我的网站，不知道我还是php/jquery新手。
这里有很多，我会努力为您指明正确的方向。
如果我们一步一个脚印，我们将从导航事件Listner开始。
$('#navbar div.button a').click(function(){
});
然后你可能想得到点击的区域/页面的名称
$('#navbar div.button a').click(function(){
var pageName = $(this).attr('href').replace('index.php?page=','') // get name
});
然后，您可能想要获取删除旧内容，然后将新内容附加到该区域。假设所有页面都已加载到某个隐藏的潜水区，请尝试此操作。
$('#navbar div.button a').click(function(){
var pageName = $(this).attr('href').replace('index.php?page=','') // get name
var newContent = $('#'+ pageName).html();
$('#mainbody div#currentPageWrapper').fadeOut(function(){
$(this).empty();
}); //clear old content
$('#mainbody div#currentPageWrapper').append(newContent).fadeIn();
});
要动态获取页面，您可以进行这样的ajax调用(更多关于$.get((的信息，请点击
$.get('ajax/test.html', function(data) {
$('.result').html(data);
alert('Load was performed.');
});
在这个例子中，你看到的是类似于的东西
$('#navbar div.button a').click(function(){
var pageName = $(this).attr('href').replace('index.php?page=','') // get name
//var newContent = $('#'+ pageName).html(); //get preloaded
$.get(pageName + '.php', function(data) {
$('#mainbody div#currentPageWrapper').fadeOut(function(){
$(this).empty();
}); //clear old content
$('#mainbody div#currentPageWrapper').append(data).fadeIn();
});
});