** 已解决* 问题是我的计算机上的文件访问控制因为我已经将它上传到设备服务器而已经工作了！
我有一个使用ajax动态加载页面的网站。起初我认为问题是因为我使用.load然后我尝试使用$ .ajax而仍然有同样的问题。使用这两种方法适用于IE和Firefox，但不适用于谷歌浏览器。 javascript文件的代码如下：
// JavaScript Document
$(document).ready(function() {
/* THIS SECTION OF CODE WAS TAKEN FROM http://forum.jquery.com/topic/getting-value-from-a-querystring */
// ***this goes on the global scope
// get querystring as an array split on "&"
var querystring = location.search.replace( '?', '' ).split( '&' );
// declare object
var queryObj = {};
// loop through each name-value pair and populate object
for ( var i=0; i<querystring.length; i++ ) {
// get name and value
var name = querystring[i].split('=')[0];
var value = querystring[i].split('=')[1];
// populate object
queryObj[name] = value;
}
/* END SECTION */
jQuery.fn.stretchheight = function() {
if ($(window).height() > $('body').innerHeight())
{
$(this).height($(window).height() - ($('body').innerHeight() - $(this).outerHeight(true)));
}
return this;
}
//if GET VARIABLE page is == 1 then hide all the green stuff and start animating for red section
if (queryObj["page"] == 1)
{
$("#sales-bottom").hide();
$(".logo").css("float","left");
$(".logo").hide();
$(".content-area").css("float","left");
$(".content-area").hide();
$(".green-side").css("display","none");
$(".red-side").css("display","visible");
$(".red-side").stretchheight();
$(".red-side").css("position","absolute");
$(".red-side").css("left","-300px");
$(".logo").css("position","absolute");
$(".logo").css("left","400px");
$(".content-area").css("position","absolute");
$(".content-area").css({"left":"400px","top":"230px"});
$(".red-side").animate({left: 0},1000,function() {
$(".inner-red-side").fadeIn(1000,function() {
$(".logo").fadeIn(1000,function() {
$(".content-area").fadeIn(1000);
});
});
});
}
//if GET VARIABLE page is == 2 then hide all the red stuff and start animating for green section
if (queryObj["page"] == 2)
{
$("#port-sub").hide();
$("#design-bottom").hide();
$(".logo").css("float","right");
$(".logo").hide();
$(".content-area").css("float","right");
$(".content-area").hide();
$(".red-side").remove();
$(".green-side").stretchheight();
$(".green-side").css("position","absolute");
$(".green-side").css("right","-300px");
$(".logo").css("position","absolute");
$(".logo").css("right","400px");
$(".content-area").css("position","absolute");
$(".content-area").css({"right":"400px","top":"230px"});
$(".green-side").animate({right: 0},1000,function() {
$(".inner-green-side").fadeIn(1000,function() {
$(".logo").fadeIn(1000,function() {
$(".content-area").fadeIn(1000)
});
});
}
);
}
/****** ALL CONTENT SECTIONS FOR RED ********/
//CONTENT FOR WHAT WE OFFER (RED)
if((queryObj['page'] == 1) && (queryObj["sel"] == 1))
{
$.ajax({
url: "pages/sales/what_we_offer.html",
success: function(data){
$(".content-area").html(data);
}
});
/*
$(".content-area").load("pages/sales/what_we_offer.html");
document.title = 'Maxxim - What We Offer';
*/
}
//CONTENT FOR OUR BRANDS
if((queryObj['page'] == 1) && (queryObj["sel"] == 2))
{
$(".content-area").load("pages/sales/our_brands.html");
document.title = 'Maxxim - Our Brands';
}
//CONTENT FOR CONTACT US
if((queryObj['page'] == 1) && (queryObj["sel"] == 3))
{
$(".content-area").load("pages/sales/contact_us.html");
document.title = 'Maxxim - Contact Us';
}
/************ END OF CONTENT RED ***********/
/****** ALL CONTENT SECTIONS FOR GREEN ********/
//CONTENT FOR WHAT WE OFFER (GREEN)
if((queryObj['page'] == 2) && (queryObj["sel"] == 1))
{
$(".content-area").load("pages/design/what_we_offer.html");
document.title = 'Maxxim - What We Offer';
}
if((queryObj['page'] == 2) && (queryObj["sel"] == 2))
{
$(".content-area").load("pages/design/packaging.html");
document.title = 'Maxxim - Packaging';
}
if((queryObj['page'] == 2) && (queryObj["sel"] == 3))
{
$(".content-area").load("pages/design/brandmarks.html");
document.title = 'Maxxim - Brandmarks';
}
if((queryObj['page'] == 2) && (queryObj["sel"] == 4))
{
$(".content-area").load("pages/design/print_material.html");
document.title = 'Maxxim - Print Material';
}
/************ END OF CONTENT GREEN ***********/
//if GET VARIABLE page is == 2 then hide all the red stuff
if (queryObj["page"] == 2) {
$(".red-side").css("display","none");
$(".green-side").css("display","visible");
}
/* MOUSE EVENTS */
/* RED LAYOUT */
//mouseover for sales & marketing
$("#s").hover(
function()
{
this.src = "imgs/main/sales-m-butt-o.gif";
},
function()
{
this.src = "imgs/main/sales-m-butt.gif";
}
);
//mouseover for design
$("#d").hover(
function()
{
this.src = "imgs/main/design-butt-o.gif";
},
function()
{
this.src = "imgs/main/design-butt.gif";
}
);
//mouseover for what we offer (red)
$("#offer-red").hover(
function()
{
this.src = "imgs/main/what-we-offer-butt-o.gif";
},
function()
{
this.src = "imgs/main/what-we-offer-butt.gif";
}
);
//mouseover for our brands (red)
$("#brands-red").hover(
function()
{
this.src = "imgs/main/our-brands-butt-o.gif";
},
function()
{
this.src = "imgs/main/our-brands-butt.gif";
}
);
//mouseover for our brands (red)
$("#contact-red").hover(
function()
{
this.src = "imgs/main/contact-us-butt-o.gif";
},
function()
{
this.src = "imgs/main/contact-us-butt.gif";
}
);
//changes page to show design information
$("#design-bottom").click(function() {
window.location.href = "main.html?page=2&sel=1";
});
/* GREEN LAYOUT MOUSE EVENTS*/
//mouseover for what we offer
$("#offer-green").hover(
function()
{
this.src = "imgs/main/des-what-we-offer-butt-o.gif";
},
function()
{
this.src = "imgs/main/des-what-we-offer-butt.gif";
}
);
//mouseover for packaging
$("#portfolio-green").hover(
function()
{
this.src = "imgs/main/des-portfolio-butt-o.gif";
},
function()
{
this.src = "imgs/main/des-portfolio-butt.gif";
}
);
//mouseover for packaging
$("#packaging-green").hover(
function()
{
this.src = "imgs/main/packaging-butt-o.gif";
},
function()
{
this.src = "imgs/main/packaging-butt.gif";
}
);
//mouseover for brandmarks
$("#brandmarks-green").hover(
function()
{
this.src = "imgs/main/brandmarks-butt-o.gif";
},
function()
{
this.src = "imgs/main/brandmarks-butt.gif";
}
);
//mouseover for materials
$("#materials-green").hover(
function()
{
this.src = "imgs/main/print-material-butt-o.gif";
},
function()
{
this.src = "imgs/main/print-material-butt.gif";
}
);
//changes page to show sales and marketing information
$("#sales-bottom").click(function() {
window.location.href = "main.html?page=1&sel=1";
});
//click event for portfolio brings down sub menu (GREEN)
$("#port-menu").click(function() {
$("#port-sub").show();
});
});
HTML文件的代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Maxxim - Sales & Marketing</title>
<script type="text/javascript" language="JavaScript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="JavaScript" src="js/animated.js"></script>
<link rel="stylesheet" type="text/css" href="css/animated.css">
</head>
<body>
<div class="red-side">
<div class="inner-red-side">
<img src="imgs/main/sales-and-marketing.gif" alt="Sales & Marketing" id="sales-and-marketing">
<ul>
<li><a href="main.html?page=1&sel=1"><img src="imgs/main/what-we-offer-butt.gif" alt="What We Offer" id="offer-red"></a></li>
<li><a href="main.html?page=1&sel=2"><img src="imgs/main/our-brands-butt.gif" alt="Our Brands" id="brands-red"></a></li>
<li><a href="main.html?page=1&sel=3"><img src="imgs/main/contact-us-butt.gif" alt="Contact Us" id="contact-red"></a></li>
</ul>
</div>
</div>
<div class="logo">
<img src="imgs/main/main-logo.gif" alt="Maxxim Logo">
<a href="main.html?page=1&sel=1" title="Sales & Marketing"><img src="imgs/main/sales-m-butt.gif" alt="Sales & Marketing" id="s"></a>
<a href="main.html?page=2&sel=1" title="Design"><img src="imgs/main/design-butt.gif" alt="Design" id="d"></a>
<div class="clear"></div>
</div>
<div class="content-area">
</div>
<div class="green-side">
<div class="inner-green-side">
<img src="imgs/main/design.gif" alt="Design" id="design">
<ul>
<li><a href="main.html?page=2&sel=1"><img src="imgs/main/des-what-we-offer-butt.gif" alt="What We Offer" id="offer-green"></a></li>
<li id="port-menu">
<img src="imgs/main/des-portfolio-butt.gif" alt="Portfolio" id="portfolio-green">
<ul id="port-sub">
<li><a href="main.html?page=2&sel=2"><img src="imgs/main/packaging-butt.gif" alt="Packaging" id="packaging-green"></a></li>
<li><a href="main.html?page=2&sel=3"><img src="imgs/main/brandmarks-butt.gif" alt="Brandmarks" id="brandmarks-green"></a></li>
<li><a href="main.html?page=2&sel=4"><img src="imgs/main/print-material-butt.gif" alt="Print Materials" id="materials-green"></a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="design-bottom"></div>
<div id="sales-bottom"></div>
</body>
</html>
最后CSS文件的代码如下：
@charset "utf-8";
/* CSS Document */
/* GENEREAL */
body
{
margin: 0 0;
background-color: #000;
}
a img
{
border: none;
}
.clear
{
clear: both;
}
/* LOGO */
.logo
{
width: 254px;
margin-top: 80px;
}
#s
{
float: left;
}
#d
{
float: left;
}
/* RED SIDE */
.red-side
{
padding-top: 150px;
background-color: #6b0006;
width: 280px;
float: left;
}
.inner-red-side
{
display: none;
}
#sales-and-marketing
{
margin-left: 30px;
margin-bottom: 40px;
}
.red-side ul
{
}
.red-side li
{
list-style-type: none;
margin-top: 50px;
margin-left: 45px;
}
#design-bottom
{
background-image:url(../imgs/main/design-lrg-butt.gif);
width: 102px;
height: 31px;
position: fixed;
bottom: 25px;
right: 30px;
}
#design-bottom:hover
{
background-image:url(../imgs/main/design-lrg-butt-o.gif);
}
/* CONTENT AREA */
.content-area
{
width: 550px;
font: Verdana, Geneva, sans-serif;
font-size:16px;
color: #fff;
}
/* GREEN SIDE */
.green-side
{
padding-top: 150px;
background-color: #73a534;
width: 280px;
float: right;
}
#design
{
margin-left: 30px;
margin-bottom: 40px;
}
.green-side ul
{
}
.green-side li
{
list-style-type: none;
margin-top: 50px;
margin-left: 45px;
}
#sales-bottom
{
background-image: url(../imgs/main/sales-m-butt-lrg.gif);
width: 213px;
height: 31px;
position: fixed;
bottom: 25px;
left: 30px;
}
#sales-bottom:hover
{
background-image:url(../imgs/main/sales-m-butt-lrg-o.gif);
}
#port-sub
{
margin-left: -35px;
margin-top: -20px;
}
#port-sub li
{
margin-bottom: -20px;
}
可以在http://camrin.cspsolutions.ca/Maxxim
查看该网页感谢您的帮助！
答案 0 :(得分：0)
我解决了。问题是由于我的计算机上的文件访问控制。一旦我将其上传到在线开发服务器，它就可以了。