jquery - 单击文本 li 时用图像填充 div

Question

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

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

如何让 li 链接在 div 中填充她想要列出的八个 friend 的屏幕截图？

非常感谢您的建议。

Answer 1

给你:

http://jsfiddle.net/NDnsa/

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:

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