Fancybox iframe仅打开第一个链接

debugcn 发表于 Dev

巴鲁德

我是html的外行，但是对于我的个人网站，我正在尝试添加一些灯箱（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作为灯箱打开，chabi.html作为独立网页打开。

请帮忙

更新它可能不是fancybox问题，正如我刚刚检查过的那样，如果我添加一个相同#iframe2的ID并将第二个链接ID的ID更改为该ID，它就可以正常工作。请帮忙。

巴鲁德

通过将id更改为class（.iframe）即可解决问题

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。