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>以外的任何其他标记1}}标记）并且不使用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>

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

在div中验证href

5 个答案: