单击文本li时，使用图像填充div

I am learning the basics of jquery and have a question.

我正在学习jquery的基础知识，并有一个问题。

I have a client who wants her "friends" page to have a div that fills with a screenshot of her friend's site when the li link of the friend's name is clicked. This screenshot image will then function as a link to the respective website which will open in new window. The div will need to preload the first friends screenshot on the list so an image occupies the div when landing on the page.

我有一个客户希望她的“朋友”页面有一个div，当点击朋友姓名的li链接时，该div填充了她朋友网站的屏幕截图。然后，此屏幕截图图像将作为相应网站的链接，该网站将在新窗口中打开。 div需要预先加载列表中的第一个朋友屏幕截图，以便图像在登陆页面时占据div。

How can I make the li link fill the div with a screenshot for each of the eight friends she wants to list?

如何让li链接填充div，并为每个想要列出的八个朋友分别截屏？

Thanks so much for any advice.

非常感谢任何建议。

1 个解决方案

#1

Here you go:

干得好：

http://jsfiddle.net/NDnsa/

HTML:

HTML：

<div id="nav">
    <ul>
        <li><a href="#">Friend 1</a></li>
        <li><a href="#">Friend 2</a></li>
        <li><a href="#">Friend 3</a></li>
    </ul>
</div>

<div id="view">
    <a href="http://www.google.com"><img src="http://www.dummyimage.com/350x200/000/fff&text=friend1.jpg" /></a>
</div>

JS/JQUERY:

JS / JQUERY：

var friendArr = [
    {
        url: "http://www.google.com",
        img: "http://www.dummyimage.com/350x200/000/fff&text=friend1.jpg"
    },
    {
        url: "http://www.yahoo.com",
        img: "http://www.dummyimage.com/350x200/cef/ff0&text=friend2.jpg"
    },
    {
        url: "http://www.*.com",
        img: "http://www.dummyimage.com/350x200/f00/fff&text=friend3.jpg"
    }
];

$("#nav a").click(function() {
    var idx = $("#nav a").index(this);
    $("#view a").attr("href", friendArr[idx].url);
    $("#view a img").attr("src", friendArr[idx].img);
    return false;
});

#1