заполнить div изображением при нажатии на текст li

Question

Я изучаю основы jquery и у меня есть вопрос.

У меня есть клиент, который хочет, чтобы на его странице "друзей" был элемент div, который заполняет снимок экрана сайта ее друга при щелчке ссылки li имени друга. Этот снимок экрана будет функционировать как ссылка на соответствующий веб-сайт, который откроется в новом окне. 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;
});