Question

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

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

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

非常感谢任何建议。

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

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

1 个答案: