我是html的外行,但对于我的个人网站,我正在尝试添加一些lightbox(Fancybox)。
我面临的问题是,它只打开了作为灯箱的第一个链接,而不是第二个。如果我交换位置(即,未打开的第二个链接变为第一个),则当前的第一个链接正在打开,而不是前一个链接。我试着举一个最小的例子:
index.html:
<!DOCTYPE html>
<head>
<title>Learning Fancybox</title>
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"></script>');
</script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("#iframe").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
</head>
<body>
<div id="content">
<table cellpadding="10" cellspacing="0" border="0">
<tr>
<td>
<h3>Trying Fancybox</h3>
<li><a id="iframe" href="jbn.html" />content1</a></li>
<li><a id="iframe" href="chabi.html" />content2</a></li>
</td>
</tr>
</table>
</div>
</body>
</html>
content1(jbn.html)
<!DOCTYPE html>
<head>
<title>content2</title>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
</head>
<body>
<div id="container">
<div id="header">
<div id="content">
Some txt for content2
</div>
</div>
</div>
</body>
</html>
和内容2(chabi.html)
<!DOCTYPE html>
<head>
<title>lb content1</title>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
</head>
<body>
<div id="container">
<div id="header">
<div id="content">
Some txt here
</div>
</div>
</div>
</body>
</html>
现在,jbn.html以lightbox的形式打开,chabi.html以独立网页的形式打开。
请帮助
UPDATE这可能不是一个fancybox问题,正如我刚刚检查的那样,如果我添加一个与#iframe2
相同的id,并将第二个链接id更改为该id,则它可以正常工作。请帮忙。
通过将id更改为class(.iframe)来解决问题