0

所以，我建立了一个小网站：http ://rolandgroza.com/projects/tcsg/ ，但是在将文件移动到服务器之前似乎有一个我没有遇到的问题。我通常在部署到服务器之前先在 localhost 上进行测试，所以我只是在完成之后才看到问题。

您可以在源代码中看到我的 JavaScript 脚本，但我也将它放在这里：

$(document).ready(function() {

var header  =   $('body').find('header');
var footer  =   $('body').find('footer');
var badge   =   $('body').find('.badge-wrapper');

var logo_red = $(header).find('.logo a');

var navigation = {
    home:       $('body').find('.home'),
    about:      $('body').find('.about'),
    services:   $('body').find('.services'),
    contact:    $('body').find('.contact')
}

var container = {
    home:       $('body').find('.content-home-wrapper'),
    about:      $('body').find('.content-about-wrapper'),
    services:   $('body').find('.content-services-wrapper'),
    contact:    $('body').find('.content-contact-wrapper')
}

var home = {
    form:       $(container.home).find('.form-wrapper'),
    galleries:  $(container.home).find('.galleries-wrapper')
}

var about = {
    notepad:    $(container.about).find('.notepad-wrapper')
}

var services = {
    minimum:    $(container.services).find('.minimum-package'),
    medium:     $(container.services).find('.medium-package'),
    featured:   $(container.services).find('.featured-package')
}

var contact = {
    notepad:    $(container.contact).find('.notepad-wrapper')
}

var position = function (obj) {
    return {
        'top': (($(window).height() - $(obj).outerHeight()) / 2) + 'px',
        'left': (($(window).width() - $(obj).outerWidth()) / 2) + 'px'
    }
}

var current_page = function() {
    var path = window.location.pathname;
    var current_page = path.substring(path.lastIndexOf('/') + 1);
    return current_page;
}

var curr_pag = current_page();

switch (curr_pag) {
    case 'index.php':
        $(navigation.home).addClass('selected');
        break;
    case 'about.php':
        $(navigation.about).addClass('selected');
        break;
    case 'services.php':
        $(navigation.services).addClass('selected');            
        break;
    case 'contact.php':
        $(navigation.contact).addClass('selected');
        break;
    default:
        break;
}

$(logo_red).on('click', function() {
    var page = current_page();
    switch (page) {
        case 'index.php':
            $(home.form).removeClass('animated flipInX');
            $(home.galleries).removeClass('animated flipInX');
            $(home.form).addClass('animated fadeOutLeftBig');
            $(home.galleries).addClass('animated fadeOutRightBig');
            setTimeout(function(){
                window.location.href = 'index.php';
            }, 2000);
            break;
        case 'about.php':
            $(about.notepad).removeClass('animated flipInX');
            $(about.notepad).addClass('animated flipOutX');
            setTimeout(function(){
                window.location.href = 'index.php';
            }, 2000);
            break;
        case 'services.php':
            $(services.minimum).removeClass('animated flipInY');
            $(services.medium).removeClass('animated flipInY');
            $(services.featured).removeClass('animated flipInY');
            $(services.minimum).addClass('animated fadeOutLeftBig');
            $(services.medium).addClass('animated fadeOutDownBig');
            $(services.featured).addClass('animated fadeOutRightBig');
            setTimeout(function(){
                window.location.href = 'index.php';
            }, 2000);
            break;
        case 'contact.php':
            $(contact.notepad).removeClass('animated flipInX');
            $(contact.notepad).addClass('animated flipOutX');
            setTimeout(function(){
                window.location.href = 'index.php';
            }, 2000);
            break;
        default:
            break;
    }
    e.preventDefault();
})

for(var key in navigation) {
   var object = navigation[key];
   $(object).on('click', function(e){
        var link = $(this).attr('href');
        $(this).addClass('animated hinge');
        var page = current_page();
        switch (page) {
            case 'index.php':
                $(home.form).removeClass('animated flipInX');
                $(home.galleries).removeClass('animated flipInX');
                $(home.form).addClass('animated fadeOutLeftBig');
                $(home.galleries).addClass('animated fadeOutRightBig');
                setTimeout(function(){
                    window.location.href = link;
                }, 2000);
                break;
            case 'about.php':
                $(about.notepad).removeClass('animated flipInX');
                $(about.notepad).addClass('animated flipOutX');
                setTimeout(function(){
                    window.location.href = link;
                }, 2000);
                break;
            case 'services.php':
                $(services.minimum).removeClass('animated flipInY');
                $(services.medium).removeClass('animated flipInY');
                $(services.featured).removeClass('animated flipInY');
                $(services.minimum).addClass('animated fadeOutLeftBig');
                $(services.medium).addClass('animated fadeOutDownBig');
                $(services.featured).addClass('animated fadeOutRightBig');
                setTimeout(function(){
                    window.location.href = link;
                }, 2000);
                break;
            case 'contact.php':
                $(contact.notepad).removeClass('animated flipInX');
                $(contact.notepad).addClass('animated flipOutX');
                setTimeout(function(){
                    window.location.href = link;
                }, 2000);
                break;
            default:
                break;
        }
        e.preventDefault();
    })
}

$(badge).hover(
    function(){
        $(this).addClass('animated swing');
    },
    function(){
        $(this).removeClass('animated swing');
    }
);

setTimeout(function(){
    $(header).addClass('animated fadeInDown');
    $(footer).addClass('animated fadeInUp');
    $(badge).addClass('animated swing');
}, 1000);

setTimeout(function(){
    $(home.form).addClass('animated flipInX');
    setTimeout(function(){
        $(home.galleries).addClass('animated flipInX');
    }, 500);
}, 2000);

setTimeout(function(){
    $(about.notepad).addClass('animated flipInX');
}, 2000);

setTimeout(function(){
    $(services.minimum).addClass('animated flipInY');
    setTimeout(function(){
        $(services.medium).addClass('animated flipInY');
        setTimeout(function(){
            $(services.featured).addClass('animated flipInY');
        }, 500);
    }, 500);
}, 2000);

setTimeout(function(){
    $(contact.notepad).addClass('animated flipInX');
}, 2000);

for(var key in container) {
   var object = container[key];
   var css = position(object);
   $(object).css(css);
}

$('select').dropkick();

});

问题是，当单击其中一个菜单链接时，应该会发生一些动画，然后重定向到您单击的链接，使用window.location.href，但它几乎不起作用。

我不知道是什么问题，所以我希望有人可以，因为在 XAMPP localhost 上工作正常。

4

1 回答 1

1

问题在于您询问当前页面，并且在您的主页上，当 index.php 不在 url 中时，您丢失了一些东西并且您的 switch case 不起作用。在导航中为您的开关功能添加一个没有页面或页面 == '' 的情况，这样它就会知道该怎么做。希望有帮助！

于 2012-04-25T15:06:16.963 回答