單擊鏈接時顯示圖像

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;
    })
})