Question

我有一些链接，当你点击它们时，我需要它们将图像加载到容器中，当你点击关闭链接时，它会再次隐藏它。

我在这里有一个例子，但如果有意义的话，不确定如何将图像应用到带有链接的div中：

我认为我需要一些与此相关的东西......

<a class="click" href= "#" src="image/location">Click here to fadeIn the image in a container</a>

我将与图像有许多链接，容器将保持不变。

最好和最有效的方法是什么？

谢谢！

Answer 1

$(function () {
    $("a.click").click(function (event) {
        //hide panel in case it's already visible because of a previously loaded image
        $("#hiddenPanel").fadeOut(0);
        //disable default link click event so page does not change if link has a href
        event.preventDefault();
        //set links src to the src of image in the hidden panel 
        $("#hiddenPanel img").attr("src", $(this).attr("src"));
        $("#hiddenPanel").fadeIn(1000);
    });
    $("#closeButton").click(function () {
        $("#hiddenPanel").fadeOut(1000);
    });
});

FIDDLE

如果图像可见，您可能希望缓慢淡出图像而不是fadeOut（0），并在淡出完成后加载新图像。

Answer 2

html就在这里

<div class="wrapper">
 <a href="image.png">click me to show</a>

 <div style="display: none;">
  <img src="noimg.png" />
  <a href="#"></a>
 </div>
</div>

和jquery在这里

$('.wrapper > a').click(function(event) {
 var thisSrc = $(this).attr('href');
 var thisImg = $(this).next().children('img');

 thisImg.attr('src', thisSrc);
 $(this).next().show();
 event.preventDefault();
});

$('.wrapper > div > a').click(function() {
 $(this).parent().hide();
});

我认为执行此操作的方法很简单...您也可以键入函数来执行此操作，而不是在单击事件上运行此函数...

你可以设置标记样式的样式：））

单击链接将相关图像加载到容器中

2 个答案: