Question

我有一个idd部分的子HTML文件加载到父HTML的div中。我在顶部有一个按钮，用于清空子内容并将div返回到之前的父内容。这是一个图像库，具有主导航（父），然后是具有较小导航（子）的详细视图。这是父HTML，index.html（嵌入了CSS和JS）：

<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内的按钮是：

<div id="coffee_return">
<a href="x"><img src="images/coffee/return_btn.jpg" border="0"></a>
</div>

这个的演示是：http://mmdsgn.com/divsample/5/ - 当你点击前两个框中的任何一个（只有现在正常工作的框）时，你会看到返回按钮出现在顶部，我需要那个图形按钮以调用父HTML中的原始div id内容。

Answer 1

将“href”上的路径更改为“../”而不是“x”

<a href="../"><img src="images/coffee/return_btn.jpg" border="0"></a>

或删除它。由于您的脚本会查找href的内容，因此不建议使用＃。把它留空会导致页面刷新？我不太确定但是有效。

<a href=""><img src="images/coffee/return_btn.jpg" border="0"></a>

编辑：现在我想起来了。由于您位于同一文件夹中，因此第一个不适用于您的页面。 ; - ）

Answer 2

您需要稍微更改原始脚本：

<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#web').on('click', '.coffeenav li a', function () {
$('#web').load('coffee.html #' + $(this).attr('href'),
function() {
    $('#coffee_return').on('click', function () {
      $('#web').load('./ #web');
    return false;
});
});
return false;
});
});
</script>

这基本上说：加载coffee.html的一部分后，找一个coffee_return按钮并添加onclick行为，将原始页面重新加载到#web部分。

此外，将href按钮上的coffee_return更改为#或JavaScript:void(0);，因为它正在尝试加载名为“x”的文档：

<div id="coffee_return">
<a href="#"><img src="images/coffee/return_btn.jpg" border="0"></a>
</div>

Answer 3

如你所说，你不能在多个元素上使用相同的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>

“。这会产生错误的结果。而是为他们分配一个类并将事件与他们的类绑定。

链接从div中加载的子HTML到父HTML

3 个答案: