Question

我在div中显示图像这是由jquery

呈现的html

<div id="flickrSlider" class="flickrSliderHolder" style="width: 500px; height: 345px;">
<span class="caption"></span>
<ul style="width: 1000px; height: 320px; left: 0px;">
    <li style="background-image: url('example.jpg'); width: 500px;"></li>
    <li style="background-image: url('example2.jpg'); width: 500px;"></li>
</ul>

我希望每张图片都有一个href标签链接到像这样的google.com

<div id="flickrSlider" class="flickrSliderHolder" style="width: 500px; height: 345px;">
<span class="caption"></span>
<ul style="width: 1000px; height: 320px; left: 0px;">
    <a href="www.google.com"> <li style="background-image: url('example.jpg'); width: 500px;"></a></li>
     <li style="background-image: url('example2.jpg'); width: 500px;"></li>
</ul>

如何在JQuery中编写代码？我试过了

var arrowLink = $('<a>',{
                            className: 'link',
                            href: 'www.google.com',

        }).appendTo(li);

但它是

但它呈现为

<div id="flickrSlider" class="flickrSliderHolder" style="width: 500px; height: 345px;">
<span class="caption"></span>
<ul style="width: 1000px; height: 320px; left: 0px;">
    <li style="background-image: url('example.jpg'); width: 500px;"><a href="www.google.com"></a></li>
    <li style="background-image: url('example2.jpg'); width: 500px;"></li>
</ul>

Pls.help

Answer 1

在<li>中包含<a>无效xhtml，这就是为什么jQuery将<a>放在<li>内（这是有效的）。

样式li > a以匹配<li>的宽度+高度，您应该得到所需的结果。

Answer 2

您正在使用背景图像，因此无需点击任何内容。

修改：@ adam编辑的答案以匹配高度和宽度将解决该问题

Answer 3

您应该使用li > a设置display:block样式，以便它假定其父元素的高度和宽度。

href用于在JQuery中使用背景图像的列表

3 个答案: