Промяна на фоновото изображение на DIV в зависимост от LI кликване - javascript, jquery, html, css

Създавам уебсайт, за да покажа приложение и искам да позволя на потребителите да щракнат през макет на iPhone, за да видят различни функции на приложението.

Имам наслагване на iPhone, поместено катофоново изображение, (.iphone) и хващане на екрана, също поместени като фоново изображение, (.screen) на страницата, но искат потребителите да могат да диктуват какво ще се показва на екрана, като щракнат върху конкретни бутони.

Аз самият не съм запознат с JQuery, но ми беше казано, че това би било възможно решение за това. Как бих постигнал това? Моят код е ...

<div class="iphone"></div>
<div class="screen"></div>

<ul>
<li class="screenshots">Screen 1</li>
<li class="screenshots">Screen 2</li>
</ul>

Всяка помощ ще бъде много оценявана.

EDIT: Намерих пример за нещо подобно. Ето го ...връзка. Щракнете върху миниатюра и тя се показва на iPhone.

Отговори:

1 за отговор № 1

Вероятно бих го настроил, както следва:

<div class="fullsize">
<div class="iphone"></div>
<div class="screen"></div>
<div>

<ul class="screenshots">
<li class="iphone" id="scr1">Screen 1</li>
<li class="screen" id="scr2">Screen 2</li>
</ul>
<script>
$(".screenshots li").click(function() {
$(".fullsize div").hasClass($(this).attr("class")).css("background-image", "imgurl"));
});
</script>

---

1 за отговор № 2

<div class="iphone"></div>
<div class="screen"></div>
<ul>
<li class="screenshots"><a href="#" id="scr1">Screen 1</a></li>
<li class="screenshots"><a href="#" id="scr2">Screen 2</a></li>
</ul>
<script>
$(".screenshots a").click(function(){
switch($(this).attr("id")){
case "src1":
$(".iphone").css("background-image","url("image1.png")");
break;
case "src2":
$(".iphone").css("background-image","url("image2.png")");
break;
}
});
</script>

---

0 за отговор № 3

$("li").click(function(){
$("div").css("background-image", "image/url/here.ext");
)};

---

0 за отговор № 4

Семантично казано, вашата маркировка трябва да изглежда така:

<div class="screenshot" id="iphone"></div>
<div class="screenshot" id="screen"></div>

<ul id="screenshot-nav">
<li><a href="#iphone">Screen 1</a></li>
<li><a href="#screen">Screen 2</a></li>
</ul>

По - подходящо е да се използват действителни връзки, вместо да се добавя събитие за щракване към li. Освен това, като го правите по този начин, функционалността може да работи дори и без javascript, тъй като най-малкото потребителят просто ще бъде "прехвърлен" на дясната екранна снимка.

С това на място следващият jQuery трябва да работи:

$("#screenshot-nav a").click(function(){
$(".screenshot").hide();
$($(this).attr("href")).show();
});

Тъй като обаче правите това за iPhone, вероятно би трябвало да разгледате jQuery Mobile, и по-специално touch манипулатор на събития, вместо click.

---

0 за отговор № 5

Предлагам един манипулатор на jQuery за кликване, който може да зададе желания фон на изображението за всеки един:

<div class="iphone"></div>
<div class="screen"></div>
<ul>
<li class="screenshots" data-backgroundurl="url1.jpg">Screen 1</li>
<li class="screenshots" data-backgroundurl="url2.jpg">Screen 2</li>
</ul>
<script>
$(".screenshots").click(function(){
$(".screen").css("background-image", $(this).data("backgroundurl"));
});
</script>

---