[英]Change background-image of DIV depending on LI click
I'm creating a website to showcase an app and want to allow users to click through an iPhone mockup to view various features of the app. 我正在创建一个展示应用程序的网站,并希望允许用户点击iPhone模型来查看应用程序的各种功能。
I have an iPhone overlay, housed as a background-image, (.iphone) and a screen grab, also housed as a background-image, (.screen) on the page, but want users to be able to dictate what screengrab is shown by clicking specific buttons. 我有一个iPhone覆盖,作为背景图像,(.iphone)和屏幕抓取,也作为背景图像,(。屏幕)在页面上,但希望用户能够决定显示什么screengrab通过单击特定按钮。
I'm not familiar with JQuery myself but have been told that that would be a possible solution to this. 我自己并不熟悉JQuery,但有人告诉我这可能是一个解决方案。 How would I achieve this?
我怎么做到这一点? My code is...
我的代码是......
<div class="iphone"></div>
<div class="screen"></div>
<ul>
<li class="screenshots">Screen 1</li>
<li class="screenshots">Screen 2</li>
</ul>
Any help would be greatly appreciated. 任何帮助将不胜感激。
EDIT: I've found an example of something similar. 编辑:我找到了一个类似的例子。 Here it is... link .
这是...... 链接 。 Click a thumbnail and it shows on the iPhone.
单击缩略图,它将显示在iPhone上。
<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>
I'd probably set it up as follows: 我可能会将其设置如下:
<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>
$('li').click(function(){
$('div').css("background-image", "image/url/here.ext");
)};
Semantically speaking, your markup should look like: 从语义上讲,您的标记应如下所示:
<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>
It's more appropriate to use actual links instead of adding a click event to an li
. 使用实际链接而不是向
li
添加click事件更合适。 Besides, doing it this way allows the functionality to work even without javascript, as at the very least, the user will simply be "jumped" to the right screenshot. 此外,这样做可以让功能即使没有javascript也可以工作,至少,用户只需“跳转”到正确的屏幕截图即可。
With that in place, the following jQuery should work: 有了这个,下面的jQuery应该工作:
$('#screenshot-nav a').click(function(){
$('.screenshot').hide();
$($(this).attr('href')).show();
});
However, since you're making this for an iPhone, you should probably look into jQuery Mobile, instead, and particularly the touch
event handler, instead of click
. 但是,既然你要为iPhone制作它,你应该考虑使用jQuery Mobile,尤其是
touch
事件处理程序,而不是click
。
I'd suggest a single jQuery click handler that can set the desired image background for each one: 我建议使用单个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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.