我无法使用jQuery .load函数将单独的html文件加载到主html文件中。 “fincopy”和“finlinks”类被正确加载，但是当点击“拇指”时，加载到主页面的html文件不会被加载。我真的不知道我做错了什么......？以下是我的相关代码：
Main HTML file:
<!DOCTYPE HTML>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<title>Dan Meier/ Designer</title>
<meta name="description" content="Portfolio of Dan Meier">
<meta name="keywords" content="Freelance, Design, Illustration, Graphics, Website Design, UI, User Interface, Digital Design">
<meta name="author" content="Dan Meier">
<!-- Stylesheets -->
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<!-- JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<!-- Typekit -->
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<!--projects link-->
<div id="projects_container_new">
<div id="all_projects">
<div class="col1">
<div class="thumb" data-url="project_thesis.html" data-num="0">
<div class="thumb_title"><span class="thumb_client">Published Thesis Work</span><br />Algorithm & Parametric Design</div>
<div class="thumb_hover"><div class="view_project">See<br />Work</div></div>
<img class="thumb_image" src="images/thesis_cover.jpg">
</div></div>
<!-- Project Details -->
<div id="project_container"></div>
<div class="fin">
fin.
<div class="fincopy"><span class="finlinks"><span class="finprev">Prev</span></span> | <span class="finlinks"><span class="finclose">Back to Projects</span></span> | <span class="finlinks"><span class="finnext">Next</span></span></div>
</div>
CSS code:
/* -------- Project Details --------- */
#project_container {
width: 100%;
}
#project {
width: 100%;
}
#project_hero {
display: block;
width: 100%;
height: 520px;
margin: 0;
background-image: url("../images/mejumping.png");
background-size: cover;
background-repeat: no-repeat;
background-position: right top;
}
#project_hero .scan {
width: 100%;
height: 100%;
margin: 0;
background-image: url("../images/mejumping.png");
background-repeat: repeat;
}
#project_hero .project_title {
position: absolute;
width: 1160px;
left: 50%;
margin-left: -580px;
padding: 130px 0 0 40px;
}
#info_container {
width: 1200px;
margin: auto;
}
#info_container2 {
width: 1160px;
margin: auto;
overflow: hidden;
padding: 0 0 0 40px;
margin-bottom: 0px;
}
.project_info {
width: 400px;
margin: -30px 0 0 0;
padding: 27px 40px 0 40px;
background-color: #e8e8e8;
overflow: hidden;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.info_col1 {
float: left;
position: relative;
width: 70px;
padding: 0 0 20px 0;
}
.info_col2 {
float: left;
position: relative;
width: 135px;
padding-bottom: 20px;
}
.info_col3 {
float: left;
text-align: left;
position: relative;
width: 100%;
max-width: 700px;
padding: 0 60px 60px 40px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.info_col3 a {
color: #3cc9c1;
text-decoration: none;
border-bottom: 2px solid transparent;
-webkit-transition: all .15s ease-in-out;
-moz-transition: all .15s ease-in-out;
-o-transition: all .15s ease-in-out;
-ms-transition: all .15s ease-in-out;
transition: all .15s ease-in-out;
}
.info_col3 a:hover {
color: #3cc9c1;
text-decoration: none;
border-bottom: 2px solid #3cc9c1;
}
.image_container {
margin: 0 auto 0 auto;
width: 100%;
max-width: 1280px;
padding: 100px 40px 0 40px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.image_container .imgs {
margin: 0;
max-width: 100%;
}
.fin {
text-align: center;
font-family: "kepler-std-display", Georgia, serif;
font-weight: 400;
font-style: italic;
font-size: 30px;
line-height: 42px;
color: #808080;
padding: 100px 0 130px 0;
display: none;
}
.fincopy {
font-family: "adelle-sans", Helvetica, Arial, sans-serif;
font-weight: 400;
font-style: normal;
color: #c1c1c1;
font-size: 13px;
margin-top: 0;
}
.finlinks {
color: #808080;
cursor: pointer;
border-bottom: 2px solid transparent;
-webkit-transition: all .15s ease-in-out;
-moz-transition: all .15s ease-in-out;
-o-transition: all .15s ease-in-out;
-ms-transition: all .15s ease-in-out;
transition: all .15s ease-in-out;
}
.finlinks:hover {
cursor: pointer;
text-decoration: none;
border-bottom: 2px solid #3cc9c1;
}
.finclose {
}
.finnext {
}
.finprev {
}
<!--project_thesis.html to load into main MAIN HTML page-->
<!DOCTYPE HTML>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<title>Dan Meier/ Designer</title>
<meta name="description" content="Portfolio of Dan Meier">
<meta name="keywords" content="Freelance, Design, Illustration, Graphics, Website Design, UI, User Interface, Digital Design">
<meta name="author" content="Dan Meier">
<!-- Stylesheets -->
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<!-- JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<!-- Typekit -->
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div id="project_container"><div id="project">
<div id="project_hero" style="background-image: url(images/myimage.jpg)">
<div class="project_title"><h1>TeXT,....<br>Hello</h1></div>
<div class="scan"></div>
</div>
<div id="info_container">
<div class="project_info">
<div class="info_col1">
<p>text...,,bmgh</p>
</div>
<div class="info_col2">
<p>Text...<br>text...</p>
</div>
</div>
<div class="info_col3">
<h3>Project Details</h3>
<p>Text goes here....</p>
<p>my stuff...</p>
</div>
</div>
<div class="image_container">
<img class="imgs" src="images/image_001.jpg">
<img class="imgs" src="images/image_002.jpg">
<img class="imgs" src="images/image_003.jpg">
</div>
</div></div>
</body>
</html>
<!--javascript-->
// THUMB CLICK
$thumb.click(function() {
i = $(this).data('num');
$('#project_container').load($(this).data('url') + ' #project', function() {
$('html, body').delay(2000).animate({
scrollTop: ($('#project_container').offset().top)
},700,'easeInOutExpo');
$fin.css('display', 'block');
$loader.delay(2000).animate({opacity:"0",},"slow", function() {
$loadicon.stop(true).animate({top:"60%"},500,'easeOutExpo');
$loader.css('display', 'none');
});
});
$loader.css('display', 'block');
$loadicon.stop(true).animate({top:"50%"},500,'easeOutExpo');
$loader.animate({opacity:"1",},400,'easeOutCubic');
});
答案 0 :(得分：0)
在javaScript代码中，容器名称中有一个额外的空格：
$('#project_container').load($(this).data('url') + ' #project', function(){
... code
})
只需将' #project'替换为'#project'即可。