这可能有一个简单的解决方案，但我是新的，无法弄清楚。当我点击我的链接时，我试图将about.html中的一些文本加载到我的索引页面的#content div中。除了一个名为#content的div之外，about.html上没有任何东西，包含一个h2和段落标签内的一些文本而没有任何样式。相反，它最终会在索引的#content div中加载整个索引页面。到目前为止，这是我尝试过的。我的索引页面的名称称为cube2。我知道代码很乱，但它只是一个实验而且懒得创建一个新的样式表，把CSS放在doc中。我为这个烂摊子道歉。
Cube2.html代码：
<html xmlns="http://www.w3.org/1999/xhtml" class=" -webkit-">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Cube2</title>
<link href="./cube2_files/css" rel="stylesheet" type="text/css" data-inprogress="">
<script src="./cube2_files/jquery.min.js"></script>
<!-- <script src="js/cube-centered.js"></script> -->
<script type="text/javascript" src="./cube2_files/prefixfree.min.js"></script>
<style type="text/css">
body {
padding: 0;
margin: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
background-image: url(images/wallpaper-660816.jpg);
background-repeat: no-repeat;
background-position: center center;
}
.holoheader {
background-image: url(images/Header.png);
background-repeat: no-repeat;
height: 600px;
width: 700px;
position: relative;
margin-right: auto;
margin-left: auto;
color: #FFF;
-webkit-animation: holowrapper ease 2s infinte;
}
.holowrapper {
height: 600px;
width: 700px;
top: -110px;
margin-right: 60%;
margin-left: 40%;
position: relative;
/*-webkit-perspective: 1000px;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(45deg); */
-webkit-animation: bounce ease 1.0s infinite alternate;
}
@-webkit-keyframes bounce {
0% { top: -110px; }
100% { top: -105px; }
}
.holoheader h2 {
font-family: 'Orbitron', sans-serif;
font-size: 24px;
color: #FFF;
text-align: center;
top: 23px;
position: relative;
}
.hologram {
font-family: 'Orbitron', sans-serif;
height: 400px;
width: 700px;
margin-right: auto;
margin-left: auto;
position: relative;
background-image: url(images/Filler.png);
background-repeat: repeat-y;
top: 68px;
}
.holofooter {
background-image: url(images/Footer.png);
height: 117px;
width: 700px;
position: relative;
top: 70px;
}
.hologram #content {
color: #FFF;
text-align: center;
overflow: scroll;
overflow-x: hidden;
height: 300px;
width: 650px;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 25px;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background-color: #004040;
opacity: 0.3;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-transition: background-color 0.5s ease 0s;
background-color: #2A6964;
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:hover {
background-color: #B7EEF2;
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
.header {
height: 100%;
width: auto;
margin-left: auto;
margin-right: auto;
}
.header #innerheader {
}
.header #innerheader #logo {
margin-right: auto;
margin-left: auto;
height: 90px;
width: 600px;
margin-top: 10px;
-webkit-animation: slidein 2s 1 normal, fadein 2.5s 1 normal;
}
@-webkit-keyframes slidein {
0% { margin-top: -100px; }
100% { margin-top: 10px;; }
}
@-webkit-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#wrapper2 {
min-width: 600px;
}
.navigationmenu {
text-decoration: none;
width: 250px;
margin-left: 15px;
padding: 5px;
height: 90px;
}
.navigationmenu ul {
font-family: 'Orbitron', sans-serif;
font-size: 36px;
list-style-type: none;
margin: 0;
padding: 0;
-webkit-animation: glow 1.5s infinite alternate;
}
/*@-webkit-keyframes glow {
from { text-shadow: 0 0 0px #55A4AC; }
to {
text-shadow: 0px 0px 25px #55A4AC;
}
} */
@-webkit-keyframes glow {
0% { text-shadow: 0 0 15px #55A4AC; }
100% { text-shadow: 0px 0px 25px #55A4AC; }
}
.navigationmenu ul:hover; {
}
.navigationmenu ul a {
text-decoration: none;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
}
a {
color: #fff9d6;
display: block;
width: 60px;
}
</style>
</head>
<body>
<div class="header">
<div id="innerheader">
<div id="logo"><img src="./cube2_files/Purelight.png" width="600" height="101"></div>
</div>
</div>
<div id="wrapper2">
<div class="navigationmenu">
<ul id="nav">
<li><a href="about.html" class="home">Home</a></li>
<li><a href="about.html" class="about">About</a></li>
<li><a href="about.html" class="services">Services</a></li>
<li><a href="about.html" class="portfolio">Portfolio</a></li>
</ul>
</div>
<div class="holowrapper">
<div class="holoheader"><h2>Project FreeSky</h2>
<div class="hologram">
<div id="content">
<p>Home</p>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. </p>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="js/general.js"></script>
<div class="holofooter"></div>
</div>
</div>
</div>
</div>
</body>
</html>
关于HTML。
<!-- about.html code -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>About</title>
</head>
<body>
<div id="content">
<h2>About</h2>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. </p>
</div>
</body>
</html>
的Javascript
// JavaScript
$(document).ready(function() {
$('#content').load('content/cube2');
$('ul#nav li a').click(function() {
var page = $(this).attr('href');
$('#content').load('#content/' + page + '.html');
return false;
});
});
答案 0 :(得分：1)
您可以使用：
$('ul#nav li a').click(function() {
var page = $(this).attr('href'); // outputs = about.html
$('#content').load(page + ' #content'); // <- targets the html page's div
return false;
});
但我的建议是为父页面div使用不同的id，例如#pageContent，以便在标记中只有一个#content div：
$('ul#nav li a').click(function() {
var page = $(this).attr('href'); // outputs = about.html
$('#pageContent').load(page + ' #content'); // <- targets the html page's div
return false;
});
答案 1 :(得分：0)
如果加载的HTML只包含一个子集，我认为你可以这样做：
$.get(page + '.html', function(d) {
var content = $(d).find("#content");
content.appendTo("appendselector");
});
您从服务器获取内容，将其解析为jquery中的文档片段，然后将内部内容附加到您想要附加到的任何位置。