当文字li被点击时填充div与图像

Question

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

我有一个客户希望她的“朋友”页面有一个div，填写朋友的网站截图，当朋友的名字的li链接被点击时。然后这张屏幕截图将作为一个链接到各自的网站，并将在新窗口中打开。该div将需要预先加载列表上的第一个好友截图，以便在登陆页面时图片占据div。

我该如何让li链接为她想要列出的八个朋友中的每一个添加屏幕截图？

非常感谢您的任何建议。

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