从不同的<div> </div> </div>中的href自动将图像加载到<div>中

时间:2013-02-28 15:53:55

标签: html href

所以我有两个div。代码如下。

<div class="picture">

</div><!-- end picture -->

<div class="gallery">
    <a href="link-to-image01.jpg"><img src="mythumnail01.jpg" /></a>
    <a href="link-to-image02.jpg"><img src="mythumnail02.jpg" /></a>
    <a href="link-to-image03.jpg"><img src="mythumnail03.jpg" /></a>
</div><!-- end gallery -->

当页面加载时,我希望“div.gallery”中的第一个“href”显示在“div.picture”中。

图库是可管理的,因此“.gallery”中的缩略图最终可能会发生变化。这就是为什么我想查看“div.gallery”中的第一个“href”并将其显示在“div.picture”中。

这样的事情可能吗?我现在有一些代码在点击事件中加载“div.gallery”的“href”。但是无法解决如何在不点击的情况下自动完成的工作。代码如下。

<script>
    $(document).ready(function () {
        $("div.gallery a").click(function (event) {
            event.preventDefault();
            $("div.picture").html($("<img>").attr("src", this.href).fadeIn(1000));
        });
    });
</script>

先谢谢。

1 个答案:

答案 0 :(得分:1)

您可以尝试使用JQuery访问第一个<a>

$(document).ready(function () {
    var href = $('div.gallery a').get(0).href;
    $('div.picture').html($('<img>').attr('src', href).fadeIn(1000));
})