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

我有一个idd部分的子HTML文件加载到父HTML的div。 我在顶部有一个按钮来清空子内容并将div返回到之前的父内容。 这是一个图像库，具有主导航（父），然后是具有较小导航（子）的详细视图。 这是父HTML，indehttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x.html（嵌入了CSS和JS）：

     #container { width: 1020phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; height: 634phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; } ul#flavors { list-style: none; width: 1020phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; height: 634phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; position: relative; background: url(images/coffee/thumbs_large.jpg) no-repeat 0 0; } ul#flavors li { position: absolute; } .wakey { width: 309phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; height: 309phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; top: 0phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; left: 30phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; } .smooth { width: 309phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; height: 309phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; top: 0phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; left: 355phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; } ul#flavors li a { display: block; outline: none; height: 100%; } ul#flavors li a { tehttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/xt-indent: -9000phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; } ul#flavors li a:hover { background: url(images/coffee/thumbs_large.jpg) no-repeat 0 0; } ul#flavors li.wakey a:hover { background-position: -30phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x -640phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; } ul#flavors li.smooth a:hover { background-position: -355phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x -640phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; } #top { height: 36phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; margin-top: 10phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; margin-bottom: 10phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; }    
 
 
 
 
 
Wakey Wakey
 
Smooth Caffeinator
 
 
 
  $(document).ready(function () { $('#web').on('click', '.coffeenav li a', function () { $('#web').load('coffee.html #' + $(this).attr('href')); return false; }); });    

这是儿童HTML：

     #coffee_return { height: 36phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; margin-top: 10phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; margin-bottom: 10phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; }    
  .shell { width:100%; height:100%; } #container1 { width: 1020phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; height: 624phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; background: url(images/coffee/wakey.jpg) no-repeat 0 0; } ul#flavors1 { list-style: none; width: 1020phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; height: 624phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; position: relative; } ul#flavors1 li { position: absolute; } .wakey { width: 159phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; height: 169phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; top: 455phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; left: 30phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; } .smooth { width: 159phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; height: 169phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; top: 455phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; left: 188phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; } ul#flavors1 li a { display: block; outline: none; height: 100%; } ul#flavors1 li a { tehttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/xt-indent: -9000phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; } ul#flavors1 li a:hover { background: url(images/coffee/thumbsml_rollover.jpg) no-repeat 0 0; } ul#flavors1 li.wakey a:hover { background-position: 1phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x 11phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; } ul#flavors1 li.smooth a:hover { background-position: -157phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x 11phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; } #coffee_return { margin-top: 10phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; margin-bottom: 10phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; }  
 
  
 
 
 
Smooth Caffeinator
 
Vanilla Dream
 
 
 
 
 
 
 
  .shell { width:100%; height:100%; } #container2 { width: 1020phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; height: 624phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; background: url(images/coffee/smooth.jpg) no-repeat 0 0; } ul#flavors2 { list-style: none; width: 1020phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; height: 624phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; position: relative; } ul#flavors2 li { position: absolute; } .wakey { width: 159phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; height: 169phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; top: 455phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; left: 30phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; } .smooth { width: 159phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; height: 169phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; top: 455phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; left: 188phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; } ul#flavors2 li a { display: block; outline: none; height: 100%; } ul#flavors2 li a { tehttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/xt-indent: -9000phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; } ul#flavors2 li a:hover { background: url(images/coffee/thumbsml_rollover.jpg) no-repeat 0 0; } ul#flavors2 li.wakey a:hover { background-position: 1phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x 11phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; } ul#flavors2 li.smooth a:hover { background-position: -157phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x 11phttps://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x; }  
 
  
 
 
 
Wakey Wakey
 
Vanilla Dream
 
 
 
 
 
 
   

子HTML中每个引用的div id内的按钮是这样的：

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

Answer 1

将“href”上的路径更改为“https://stackoverflow.com/questions/20579323/”而不是“https://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x”

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

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

Answer 2

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

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

另外，将coffee_return按钮上的href更改为#或JavaScript:void(0); 因为它正在尝试加载一个名为“https://stackoverflow.com/questions/20579323/link-back-out-from-child-html-loaded-in-div-to-parent-html/x”的文档：

Answer 3

您不能在多个元素上使用相同的ID，正如您所说的那样

 The button inside each referenced div id in the child HTML is this: 
   

“这会产生错误的结果。相反，给他们分配一个类并将事件与他们的类绑定。