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

});

問題は、メニュー リンクの 1 つをクリックすると、いくつかのアニメーションが発生し、クリックしたリンクにリダイレクトされるはずですがwindow.location.href、ほとんど何も機能しません。

XAMPP localhost では問題なく動作するため、何が問題なのかわかりません。

4

1 に答える 1

1

問題は、現在のページを尋ねていることと、ホームページで index.php が URL にない場合、何かが欠けていて、スイッチケースが機能しないことです。ナビゲーションの switch 関数に、ページがない場合やページ == '' がない場合を追加すると、何をすべきかがわかります。それが役立つことを願っています!

于 2012-04-25T15:06:16.963 に答える