Question

我想实现类似的目标：

点击导航栏中的链接
fadeOut网站的一部分，
从链接
动画换行以匹配新站点高度
淡出新内容。

我为此找到了一个简洁的解决方案（here），但我的网站以不同的方式构建。

我的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');
?>

我重新加载导航栏，因为如果会话存在，它会被更改。

navbar.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（）类加载动态内容。也许我应该以不同的方式构建我的网站，dunno im still php / jquery newb。

Answer 1

这里有很多，我会试着指出你正确的方向。

如果我们一步一步，我们将从导航eventListner开始。

$('#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（）here

$.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();


});




    });

jquery，动画页面加载动画

1 个答案: