将从div中加载的子HTML返回到父HTML [英] Link back out from child HTML loaded in div to parent HTML
问题描述
我有一个子HTML文件的id'd部分加载到父HTML的div。我在顶部有一个按钮，以清空子内容，并将div返回到之前存在的父内容。这是一个图像库，具有主导航（父），然后是具有较小导航（子）的详细视图。这里是父HTML，index.html（嵌入CSS和JS）：
I have an id'd part of a child HTML file loaded into the parent HTML's div. I have a button at the top to empty out the child content and return the div to the parent content that was there previously. This is for an image gallery, with a main navigation (parent) and then the detailed view with smaller navigation (child). Here is the parent HTML, index.html (with CSS and JS embedded):
<html>
<head>
<title>Java Factory</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<style type="text/css">
#container {
width: 1020px;
height: 634px;
}
ul#flavors {
list-style: none;
width: 1020px;
height: 634px;
position: relative;
background: url(images/coffee/thumbs_large.jpg) no-repeat 0 0;
}
ul#flavors li {
position: absolute;
}
.wakey {
width: 309px;
height: 309px;
top: 0px;
left: 30px;
}
.smooth {
width: 309px;
height: 309px;
top: 0px;
left: 355px;
}
ul#flavors li a {
display: block;
outline: none;
height: 100%;
}
ul#flavors li a {
text-indent: -9000px;
}
ul#flavors li a:hover {
background: url(images/coffee/thumbs_large.jpg) no-repeat 0 0;
}
ul#flavors li.wakey a:hover {
background-position: -30px -640px;
}
ul#flavors li.smooth a:hover {
background-position: -355px -640px;
}
#top {
height: 36px;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="web">
<div id="top">
</div>
<nav id="container">
<ul id="flavors" class="coffeenav">
<li class="wakey"><a href="#wakey">Wakey Wakey</a></li>
<li class="smooth"><a href="#smooth">Smooth Caffeinator</a></li>
</ul>
</nav>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#web').on('click', '.coffeenav li a', function () {
$('#web').load('coffee.html #' + $(this).attr('href'));
return false;
});
});
</script>
</body>
</html>
这里是子HTML：
<html>
<head>
<title>div container switch test</title>
<style type="text/css">
#coffee_return {
height: 36px;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="wakey">
<style type="text/css">
.shell {
width:100%;
height:100%;
}
#container1 {
width: 1020px;
height: 624px;
background: url(images/coffee/wakey.jpg) no-repeat 0 0;
}
ul#flavors1 {
list-style: none;
width: 1020px;
height: 624px;
position: relative;
}
ul#flavors1 li {
position: absolute;
}
.wakey {
width: 159px;
height: 169px;
top: 455px;
left: 30px;
}
.smooth {
width: 159px;
height: 169px;
top: 455px;
left: 188px;
}
ul#flavors1 li a {
display: block;
outline: none;
height: 100%;
}
ul#flavors1 li a {
text-indent: -9000px;
}
ul#flavors1 li a:hover {
background: url(images/coffee/thumbsml_rollover.jpg) no-repeat 0 0;
}
ul#flavors1 li.wakey a:hover {
background-position: 1px 11px;
}
ul#flavors1 li.smooth a:hover {
background-position: -157px 11px;
}
#coffee_return {
margin-top: 10px;
margin-bottom: 10px;
}
</style>
<div class="shell">
<div id="coffee_return">
<a href="x"><img src="images/coffee/return_btn.jpg" border="0"></a>
</div>
<nav id="container1">
<ul id="flavors1" class="coffeenav">
<li class="smooth"><a href="#smooth">Smooth Caffeinator</a></li>
<li class="vanilla"><a href="#vanilla">Vanilla Dream</a></li>
</ul>
</nav>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div id="smooth">
<style type="text/css">
.shell {
width:100%;
height:100%;
}
#container2 {
width: 1020px;
height: 624px;
background: url(images/coffee/smooth.jpg) no-repeat 0 0;
}
ul#flavors2 {
list-style: none;
width: 1020px;
height: 624px;
position: relative;
}
ul#flavors2 li {
position: absolute;
}
.wakey {
width: 159px;
height: 169px;
top: 455px;
left: 30px;
}
.smooth {
width: 159px;
height: 169px;
top: 455px;
left: 188px;
}
ul#flavors2 li a {
display: block;
outline: none;
height: 100%;
}
ul#flavors2 li a {
text-indent: -9000px;
}
ul#flavors2 li a:hover {
background: url(images/coffee/thumbsml_rollover.jpg) no-repeat 0 0;
}
ul#flavors2 li.wakey a:hover {
background-position: 1px 11px;
}
ul#flavors2 li.smooth a:hover {
background-position: -157px 11px;
}
</style>
<div class="shell">
<div id="coffee_return">
<a href="x"><img src="images/coffee/return_btn.jpg" border="0"></a>
</div>
<nav id="container2">
<ul id="flavors2" class="coffeenav">
<li class="wakey"><a href="#wakey">Wakey Wakey</a></li>
<li class="vanilla"><a href="#vanilla">Vanilla Dream</a></li>
</ul>
</nav>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</body>
</html>
子HTML中每个引用的div id内的按钮是：
The button inside each referenced div id in the child HTML is this:
<div id="coffee_return">
<a href="x"><img src="images/coffee/return_btn.jpg" border="0"></a>
</div>
此示例为： http://mmdsgn.com/divsample/5/ - 当您点击前两个框中的任一个时，您会看到返回按钮显示在顶部
And the demo for this is: http://mmdsgn.com/divsample/5/ -- You'll see the return button appears at the top when you click either of the first two boxes (only ones that work right now) and I need that graphic button to call up the original div id content in the parent HTML.
推荐答案
<a href="../"><img src="images/coffee/return_btn.jpg" border="0"></a>
或将其删除。使用＃不是真正的推荐，因为你的脚本寻找href的内容。所以将其留空会导致页面刷新？我不太确定，但它工作。
or remove it. Using # is not really recommended since your script looks for the content of href. So leaving it empty would cause the page to refresh? i'm not quite sure but it works.
<a href=""><img src="images/coffee/return_btn.jpg" border="0"></a>
编辑：
现在我想想。由于您位于同一个文件夹中，因此第一个网页无法在您的网页上使用。 ; - ）
Now that i think about it. The first one would not work on your page since you are in the same folder. ;-)
这篇关于将从div中加载的子HTML返回到父HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
