根据LI点击更改DIV的背景图像

Question

我正在创建一个展示应用程序的网站，并希望允许用户点击iPhone模型来查看应用程序的各种功能。

我有一个iPhone覆盖，作为背景图像，（.iphone）和屏幕抓取，也作为背景图像，（。屏幕）在页面上，但希望用户能够决定显示什么screengrab通过单击特定按钮。

我自己并不熟悉JQuery，但有人告诉我这可能是一个解决方案。 我怎么做到这一点？ 我的代码是......

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

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

任何帮助将不胜感激。

编辑：我找到了一个类似的例子。 这是...... 链接 。 单击缩略图，它将显示在iPhone上。

Answer 1

<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>

Answer 2

我可能会将其设置如下：

<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>

Answer 3

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

Answer 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添加click事件更合适。 此外，这样做可以让功能即使没有javascript也可以工作，至少，用户只需“跳转”到正确的屏幕截图即可。

有了这个，下面的jQuery应该工作：

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

但是，既然你要为iPhone制作它，你应该考虑使用jQuery Mobile，尤其是touch事件处理程序，而不是click 。

Answer 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>