在div内验证href

Question

我有这种类型的标记：

<div class="box" href="pic-gallery/img01.jpg">
  <div>----------</div>
</div>

现在，我要验证这一点，它显示错误，因为不允许在div中使用href。那么如何验证这个错误呢？我用过：

<div class="box" onclick="href='pic-gallery/img01.jpg'"></div>

但是当图片通过fancybox进入时，它没有打开图像。所以请帮帮我。任何帮助和建议将不胜感激。

Answer 1

href不是div的有效属性，仅是a和area。最好的选择是使用实际链接（a元素）。您可以使用样式（display: block）将其显示为现代浏览器中的块（而不是不幸的是，在某些旧版本的IE上），并且由于其内容模型为transparent，因此可以在其中放置一个div。 Fancybox howto page上的所有示例都使用a元素显示，而不是div。

所以也许

<a class="box" href="pic-gallery/img01.jpg">
  <div>----------</div>
</a>

...“ box”类包括display: block。或者，如果您在不想显示块的地方使用该类，请分开display: block并将其单独应用（通过另一个类或内联style属性）。

Answer 2

使用fancybox，您可以通过将图像的路径放在链接中来显示图像：

<a class="box" href="pic-gallery/img01.jpg"></a>

这将由fancybox根据链接的类，例如box进行标识，并将由fancybox打开。

Answer 3

这是预期的-href属性在<div>元素上无效。作为T.J.上面说过，最好使用实际的<a>元素来执行此操作-更具语义意义。您甚至可以将<a>嵌套在外部<div>内，并用CSS将其隐藏，因此，未启用JS的用户不会看到多余的标记。

Answer 4

代替此代码。

<div class="box" onclick="href='pic-gallery/img01.jpg'"></div>

尝试此

<script type="text/javascript">function open_win(){window.open("pic-gallery/img01.jpg");}</script><div class="box" onclick="javascript:open_win();"></div>

但是您要如何打开图像？

Answer 5

[我知道这很不寻常，但是您仍然可以在fancybox中打开图像（或任何其他类型的内容），将onclick属性添加到<div>（或<a>标记以外的任何其他标记），而无需使用href属性。

您可能有此（有效）html：

<div class="box" onclick="openFancybox('pic-gallery/img01.jpg');">
  <div>whatever here</div>
</div>

并使用此脚本：

<script type="text/javascript">
function openFancybox(url){
 $.fancybox({
  'href': url,
  'type': 'image' //select the proper type of content
 });
}
</script>

您正在做的是将url传递给函数，而不是使用href