0
这是我第一次处理这个,所以请纠正我,如果我的这个错误的术语。如何更改点击框中的内容和背景颜色?
我有一个div盒子,它的高度是500,宽度是500,在第一次加载时我会有文字内容。在底部,我会看到一个按钮,上面写着“点击这里”。点击该按钮后,我想更改框中的背景并加载图像。
请参考下图:
这是我第一次处理这个,所以请纠正我,如果我的这个错误的术语。如何更改点击框中的内容和背景颜色?
我有一个div盒子,它的高度是500,宽度是500,在第一次加载时我会有文字内容。在底部,我会看到一个按钮,上面写着“点击这里”。点击该按钮后,我想更改框中的背景并加载图像。
请参考下图:
我个人采取了另一种更直接的方法。也就是说,如果你需要的是一些图片,你可能也接他们事先并隐藏他们,跳过不必要的服务器请求:
CODE:
HTML:
<div id="container">
<div id="button_layer">
<p>Some Text</p>
<button>Click Me</button>
</div>
<div id="images_layer">
<img src="http://mattat.org.il/wp-content/themes/matat/img/aminadav.jpg"/>
<img src="http://mattat.org.il/wp-content/themes/matat/img/aminadav.jpg"/>
<img src="http://mattat.org.il/wp-content/themes/matat/img/aminadav.jpg"/>
</div>
</div>
CSS:
#container {
width:500px;
height:500px;
background:grey;
}
#images_layer {
display:none;
}
JS:
$(document).ready(function(){
$("button").click(function(){
$("#button_layer").hide();
$("#images_layer").show();
$("#container").css("background","yellow");
})
});
感谢Matanya。但是,我怎么会点击背景颜色变化? – ariel
还有一件事是我无法使JavaScript部分在我的网页上工作。我用什么来确保JavaScript加载。这就是我如何使用它:
试试这个
Check Fiddle
来源
2012-12-09 18:47:35
谢谢Sushanth。但是有两个问题。如何在点击时更改背景颜色,然后我将像那样手动加载图像,而不是依靠php来调用它们。我将如何完成这项工作? – ariel
你可以使用添加和删除类来完成工作。另外我还没有在任何地方使用php代码。检查更新的小提琴 –
好吧,让我工作。如果我有一个按钮ID,我可以使用按钮#编号吧? – ariel
我会通过捕捉点击功能,然后加载一些完成这个任务数据通过从服务器请求数据到div中。
然后在服务器端,我们可以捕获获取请求并返回一串图片;这个例子是在PHP中。
如果请求在我们
.ajax()
电话提供的文件名会发生,那么它将使用GET
请求抢图像。我们有条件检查getImages
的存在和价值。我们在其中创建一个带有图像的字符串,并将其传回。我们的ajax()
调用的success:function(data)
处理返回的数据。在这个例子中。数据是我们在php conditional
中所做的$str
。我们只是将该框的HTML更改为我们从服务器提供的字符串。来源
2012-12-09 18:47:50 Ohgodwhy
我上传一个例子与动画改变背景颜色:
http://jsfiddle.net/TBvcW/1/
它使用CSS3做,但谁的浏览器不支持它会改变没有动画的颜色。对于色彩的动画的关键代码是这些CSS属性:
哪里,我们决定改变时(通过CSS),该属性将被动画,多少时间动画会抓住。
你甚至可以改变框的高度,并添加图像在其他的答案中描述:
http://jsfiddle.net/TBvcW/2/
干杯。
来源
2012-12-09 19:06:42