我有一个动态（带翻转导航）图库仪表板（UI），用于选定的咖啡口味，并查看所选每种口味的详细信息。它由两个HTML文件组成，即父文件和子文件。父（index.html）中的按钮链接到div中嵌入的子（coffee.html）中的div id。翻转在两个级别都有效，并且单击/链接在主页/父页面上工作，但链接在嵌套在div中的二级子页面中不起作用。这是父/主页面（嵌入了所有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;
}
</style>
</head>
<body>
<div id="web">
<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', '#flavors li a', function () {
$('#web').load('coffee.html #' + $(this).attr('href'));
return false;
});
});
</script>
</body>
</html>
这是子页面（包含所选每种风味的详细视图）：
<html>
<head>
<title>div container switch test</title>
</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;
}
</style>
<div class="shell">
<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">
<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>
您可以在此处查看完整的用户界面：http://www.mmdsgn.com/divsample/3/
重要说明：在本示例演示中，只有前两个框/按钮功能，“Wakey Wakey”和“Smooth Caffeinator”。您将在第二个详细视图中注意到（下面的6框导航和上面的详细视图）按钮不会来回切换 - 只有翻转工作。这是我的问题。
您会注意到父级别还提到了JS代码：