单击链接时显示图像

Question

我希望当用户单击某个看起来像#foo的链接时在页面上显示图像。 例

<a href="#dog">Dog</a>
<a href="#cat">Cat</a>

如果网址中包含#dog，它将显示一条狗的图片。 如果网址包含#cat，它将显示一只猫的图片。 如何做到这一点。 然后将图像显示在图像标签中。

<img id="something" />

编辑：我正在考虑隐藏所有图像，直到单击链接ID。 然后有人获得该URL并确定要显示的图像。 最重要的部分是通过识别URL来实现

我想要实现的sudo代码构想。

    if url = #dog then 
    display in idelement dog.jpg 
    else if url = #cat then  
    display in idelement cat.jpg 
    else display defualt.jpg


<img id="idelement" />

Answer 1

我在这里举了一个例子，但它想念您如何显示图像： http : //jsfiddle.net/VgkUL/3/

<a href="#foo" >#foo....</a>
<a href="#cat" >#cat....</a>

$('a').each( function() {
    $(this).click( function(e) {
        var imgUrl = $(this).attr("href"); // url of the image, you can save it somewhere else into the a Tag
        alert(imgUrl);
        // display here the image where you want
        e.preventDefault();
        return false;
    })
})