因此,我建立了一個小網站:http://rolandgroza.com/projects/tcsg/,但它似乎有一個問題,我沒有遇到將文件移動到服務器之前。我通常在部署到服務器之前在本地主機上進行測試,所以我只在我做之後纔看到問題。JavaScript重定向它不在服務器上工作,但在本地主機上?
你可以看到在源代碼中我的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本地主機上工作正常。
你確定你的css文件的路徑是正確的嗎?在Firefox中打開網址時我沒有看到它們。 – Roger 2012-04-25 14:53:42
css文件與'location.href'有什麼關係?我正在與LESS合作,但CSS在那裏我向你保證,因爲一切看起來都不錯,至少在Chrome中,我還沒有在其他瀏覽器上測試過。 – Roland 2012-04-25 14:56:46
我沒有回答這個問題,只是想知道CSS在哪裏。刷新後,我看到圖形。 (看起來不錯)。該頁面加載速度較慢,Firefox正在拋出有關腳本繁忙的錯誤。 – Roger 2012-04-25 15:03:11