我有两个单独的 HTML 文件(index.html 和 home.html)和一个 javascript (bodyswapscript.js) 文件。我试图弄清楚如何使用java脚本将home.html的主体(仅)交换到index.html的主体中。基本上替换 HTML 文件之间的正文标签。
我在下面发布了我的 html 代码和 java 脚本。 html 又快又脏，所以我只对用 home.html 交换 index.html 中的正文信息感兴趣
1.)index.html
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<meta charset="utf-8">
<title> My Profile</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<header>
<hgroup>
<center><h1>Index</h1>
<h4>index page</h4></center>
</hgroup>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="bodyswapscript.js"></script>
<nav>
<div id="wrapper">
<div id="header">
<ul>
<li><a id="homeContainer" href="home.html">Home</a></li>
<!-- <li><a id="testContainer" href='test.html'>test</a></li>
<li><a id="pageContainer" href="page.html">page</a></li> -->
</ul>
</div>
</div>
</nav>
</header>
<body>
<article>
<div id='swapcontent'>
index page
</div>
</article>
</body>
<footer>
<p>© copy right, all rights reserved.</p>
</footer>
2.) home.html
<header>
<hgroup>
<center><h1>home.html</h1>
<h4>text</h4></center>
</hgroup>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</header>
<body>
<article>
<div id='swapcontent'>
This is my home page
</div>
</article>
</body>
3.) bodyswapscript.js
$(document).ready(function()
{
$( 'li>a[id$="Container"]' ).click(function(event)
{
event.preventDefault();
var href = $(this).attr('href');
alert("Loading " + href);
$('#swapcontent').load(href);
return false;
});
});
4.) 支持CSS
* {
font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}
body {
width: 720px;
margin: 0px auto;
}
header h1 {
font-size: 36px;
margin: 0px;
}
header h2 {
font-size: 18px;
margin: 0px;
color: #888;
font-style: italic;
}
nav ul {
list-style: none;
padding: 0px;
display: block;
clear: right;
background-color: #2B60DE;
padding-left: 4px;
height: 24px;
}
nav ul li {
display: inline;
padding: 0px 20px 5px 10px;
height: 24px;
border-right: 1px solid #ccc;
}
nav ul li a {
color: #EFD3D3;
text-decoration: none;
font-size: 13px;
font-weight: bold;
}
nav ul li a:hover {
color: #fff;
}
article > header time {
font-size: 14px;
display: block;
width: 26px;
padding: 2px;
text-align: center;
background-color: #993333;
color: #fff;
font-weight: bold;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
float: left;
margin-bottom: 10px;
}
article > header time span {
font-size: 10px;
font-weight: normal;
text-transform: uppercase;
}
article > header h1 {
font-size: 20px;
float: left;
margin-left: 14px;
text-shadow: 2px 2px 5px #333;
}
article > header h1 a {
color: #993333;
}
article > section header h1 {
font-size: 16px;
}
article p {
clear: both;
}
footer p {
text-align: center;
font-size: 12px;
color: #888;
margin-top: 24px;
}
此代码是从以下 URL 提取的:http://jsfiddle.net/Christophe/hj9ry/1/
最佳答案
正确无效html ，包括 <body> 内容的包装父元素在home.html ;调用.load()片段标识符引用home.html内的包装器元素;使用.unwrap()删除 index.html 处的包装元素在complete .load()的功能
index.html
<!doctype html>
<html>
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<meta charset="utf-8">
<title> My Profile</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<header>
<hgroup>
<center>
<h1>Index</h1>
<h4>index page</h4></center>
</hgroup>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="bodyswapscript.js"></script>
<nav>
<div id="wrapper">
<div id="header">
<ul>
<li><a id="homeContainer" href="home.html">Home</a></li>
<!-- <li><a id="testContainer" href='test.html'>test</a></li>
<li><a id="pageContainer" href="page.html">page</a></li> -->
</ul>
</div>
</div>
</nav>
</header>
<article>
<div id='swapcontent'>
index page
</div>
</article>
<footer>
<p>© copy right, all rights reserved.</p>
</footer>
</body>
</html>
home.html
<!doctype html>
<html>
<head></head>
<body>
<div id="body">
<header>
<hgroup>
<center><h1>home.html</h1>
<h4>text</h4></center>
</hgroup>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</header>
<article>
<div id='swapcontent'>
This is my home page
</div>
</article>
</div>
</body>
</html>
bodyswapscript.js
$(document).ready(function() {
$('li>a[id$="Container"]').click(function(event) {
event.preventDefault();
var href = $(this).attr('href');
// alert("Loading " + href);
$('body').load(href + " #body", function() {
$("#body *:first").unwrap()
});
return false;
});
});
关于javascript - 在两个 HTML 文件之间交换正文标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39217173/