我做了一个网站，其中包括： http ://www.htmldrive.net/items/demo/1191/Awesome-jQuery-and-CSS3-Interactive-menu
所以检查一下看看它做了什么，现在我喜欢的是当你点击例如 1 时它会打开一个框。在那个框中，我想存储 3 张或更多图像（到目前为止没有问题），但我希望能够单击这些图像并制作一个像这样的灯箱：http: //www.htmldrive.net/items/demo/ 925/灯箱-v2.05-支持-IE9-with-jQuery
现在我尝试了一些东西，但还没有真正发挥作用，有没有人可以帮助我完成这项工作？如果你想让我分享我的代码，现在让我分享一下，我现在只有代码（本文档中的第一个链接）可以工作。
我快速将代码相互组合以显示哪里出错了，所以问题是如果你点击 1,2,3 等它就不会再打开盒子了......（灯箱工作，我点击了几个菜单的位置，如果我在文本下单击它会打开灯箱：one
这是我到目前为止的代码：
HTML
<!DOCTYPE html>
<html>
<head>
<title>Interactive menu with CSS3 & jQuery</title>
<!--- Interactive Menu --->
<link rel="stylesheet" href="css/style.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<!--- Light box -->
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<style>
/* Demo page only */
#about{
color: #999;
text-align: center;
font: 0.9em Arial, Helvetica;
}
#about a{
color: #777;
}
</style>
</head>
<body>
<ul class="menu">
<li tabindex="1">
<span class="title">One</span>
<div class="content"><div class="thumbnail">
<a title="Roll over and click right side of image to move forward." rel="lightbox[plants]" href="images/image-3.jpg"><img height="40" width="100" alt="Plants: image 1 0f 4 thumb" src="images/thumb-3.jpg"></a>
</div>
<div class="thumbnail">
<a title="Alternately you can press the right arrow key." rel="lightbox[plants]" href="images/image-4.jpg"><img height="40" width="100" alt="Plants: image 2 0f 4 thumb" src="images/thumb-4.jpg"></a>
</div>
<div class="thumbnail">
<a title="The script preloads the next image in the set as you're viewing." rel="lightbox[plants]" href="images/image-5.jpg"><img height="40" width="100" alt="Plants: image 3 0f 4 thumb" src="images/thumb-5.jpg"></a>
</div></div>
</li>
<!---- The other Menu's --->
<li tabindex="1">
<span class="title">Two</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Three</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Four</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Five</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Six</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Seven</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Eight</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Nine</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
</ul>
<script>
(function(){
// Append a close trigger for each block
$('.menu .content').append('<span class="close">x</span>');
// Show window
function showContent(elem){
hideContent();
elem.find('.content').addClass('expanded');
elem.addClass('cover');
}
// Reset all
function hideContent(){
$('.menu .content').removeClass('expanded');
$('.menu li').removeClass('cover');
}
// When a li is clicked, show its content window and position it above all
$('.menu li').click(function() {
showContent($(this));
});
// When tabbing, show its content window using ENTER key
$('.menu li').keypress(function(e) {
if (e.keyCode == 13) {
showContent($(this));
}
});
// When right upper close element is clicked - reset all
$('.menu .close').click(function(e) {
e.stopPropagation();
hideContent();
});
// Also, when ESC key is pressed - reset all
$(document).keyup(function(e) {
if (e.keyCode == 27) {
hideContent();
}
});
})();
</script>
</body>
</html>
CSS
.menu{
width: 620px;
margin: 100px auto; padding: 15px;
list-style: none;
counter-reset: li;
background: #eee;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.menu:before,
.menu:after {
content: "";
display: table;
}
.menu:after {
clear: both;
}
.menu {
zoom:1;
}
/* -------------------------------- */
.menu li {
position: relative;
float: left;
cursor: pointer;
height: 120px; width: 200px;
margin: 10px 0 0 10px;
color: #fff;
}
.menu li:hover, .menu li:focus{
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.2)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: -moz-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: -ms-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: -o-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
}
.menu .cover{
z-index: 2;
}
.menu .cover:focus{
outline: 0;
}
/* -------------------------------- */
.menu li::after{
content: counter(li);
counter-increment: li;
font: italic bold 10px serif, georgia;
position: absolute;
color: rgba(255,255,255,.1);
opacity: 0;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
.menu li:hover::after, .menu li:focus::after{
font-size: 100px;
opacity: 1;
}
.menu .cover::after{
z-index: -1;
}
/* -------------------------------- */
.menu li:nth-child(1),
.menu li:nth-child(2),
.menu li:nth-child(3){
margin-top: 0;
}
.menu li:nth-child(1),
.menu li:nth-child(4),
.menu li:nth-child(7){
margin-left: 0;
}
/* -------------------------------- */
.menu li:nth-child(1),
.menu li:nth-child(1) .content,
.menu li:nth-child(1) .close{
background-color: #2c618f;
}
.menu li:nth-child(2),
.menu li:nth-child(2) .content,
.menu li:nth-child(2) .close{
background-color: #91ab31;
}
.menu li:nth-child(3),
.menu li:nth-child(3) .content,
.menu li:nth-child(3) .close{
background-color: #714a28;
}
.menu li:nth-child(4),
.menu li:nth-child(4) .content,
.menu li:nth-child(4) .close{
background-color: #e58600;
}
.menu li:nth-child(5),
.menu li:nth-child(5) .content,
.menu li:nth-child(5) .close{
background-color: #c33a00;
}
.menu li:nth-child(6),
.menu li:nth-child(6) .content,
.menu li:nth-child(6) .close{
background-color: #7f5dac;
}
.menu li:nth-child(7),
.menu li:nth-child(7) .content,
.menu li:nth-child(7) .close{
background-color: #5672b7;
}
.menu li:nth-child(8),
.menu li:nth-child(8) .content,
.menu li:nth-child(8) .close{
background-color: #69003f;
}
.menu li:nth-child(9),
.menu li:nth-child(9) .content,
.menu li:nth-child(9) .close{
background-color: #393043;
}
/* -------------------------------- */
.menu .content{
opacity: 0; display: none\9;
overflow: hidden;
font: 12px Arial, Helvetica;
position: absolute;
height: 120px; width: 200px; /* Ideally: height: 100%; width: 100%; but works at it should just in FF */
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.menu .expanded{
opacity: .95; display: block\9;
overflow: visible;
padding: 40px;
height: 300px; width: 540px; /* Cover the entire area */
}
.menu li:nth-child(3n) .content{ /* 3,6,9 */
right: 0;
}
.menu li:nth-child(3n-1) .expanded{ /* 2,5,8 */
left: 50%;
margin-left: -310px;
}
.menu li:nth-child(7) .content, /* 7,8,9 */
.menu li:nth-child(8) .content,
.menu li:nth-child(9) .content{
bottom: 0;
}
.menu li:nth-child(4) .expanded, /* 4,5,6 */
.menu li:nth-child(5) .expanded,
.menu li:nth-child(6) .expanded{
margin-top: -190px;
top: 50%;
}
/* -------------------------------- */
.menu .title{
position: absolute;
height: 100%; width: 100%;
text-align: center;
font: italic bold 1em/120px 'trebuchet MS', Arial, helvetica;
opacity: .2;
}
.menu li:hover .title{
opacity: .7;
}
/* -------------------------------- */
.menu .close {
display: none;
border: 5px solid #fff;
color: #fff;
cursor: pointer;
height: 40px; width: 40px;
font: bold 20px/40px arial, helvetica;
position: absolute;
text-align: center;
top: -20px; right: -20px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px;
}
.menu .cover .close{
display: block;
}
不确定我是否可以向您展示 Jquery 和 Javascript 代码，但我只是使用了 2 个链接的标准代码，所以我没有对此进行任何更改。