JavaScript重定向它在服务器上不起作用，但是在本地主机上？

Question

So, I've build a little website : http://rolandgroza.com/projects/tcsg/ , but it seems to have a problem that I have not encountered before moving the files to the server. I usually test on localhost before deploying on server, so I only saw the problem after I did.

You can see my JavaScript script in the source code, but I'm placing it here too:

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

});

The problem is that when clicking one of the menu links there should be some animations happening and then redirected to a the link you clicked on, with window.location.href , but it doesn't work, almost anything.

I cannot tell what is the problem so I'm hoping someone can, because on XAMPP localhost works fine.

Answer 1

The problem is in that your asking the current page, and on your home page when the index.php isn't in the url your missing something and your switch cases arn't working. Add to your switch function in the navigation a case for having no page or page == '' that way it will know what to do. Hope that helps!