2012-12-09 138 views
0

这是我第一次处理这个,所以请纠正我,如果我的这个错误的术语。如何更改点击框中的内容和背景颜色?

我有一个div盒子,它的高度是500,宽度是500,在第一次加载时我会有文字内容。在底部,我会看到一个按钮,上面写着“点击这里”。点击该按钮后,我想更改框中的背景并加载图像。

请参考下图:

So when the "click here" button is clicked, in the same box I just want to change the background and make the text that was there removed and load images using <img> tags

回答

2

我个人采取了另一种更直接的方法。也就是说,如果你需要的是一些图片,你可能也接他们事先并隐藏他们,跳过不必要的服务器请求:

Working fiddle

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"); 
    }) 
    }); 

+0

感谢Matanya。但是,我怎么会点击背景颜色变化? – ariel

+0

还有一件事是我无法使JavaScript部分在我的网页上工作。我用什么来确保JavaScript加载。这就是我如何使用它:

1

试试这个

var images = 10; 

$('button').on('click' , function(){ 
    var html = ''; 
    for(var i =0;i<images ; i++){ 
     html += '<img src="images/image-'+ images + '"></img>'; 
    } 

    $('.a').removeClass('a').addClass('b').html(html); 

});​ 

​<div class="a"> 
    I am the initial div... 
</div> 

​<button>Click Me</button>​​​​​​​​​​​​​​​​​​​​​​​​​ 

Check Fiddle

+0

谢谢Sushanth。但是有两个问题。如何在点击时更改背景颜色,然后我将像那样手动加载图像,而不是依靠php来调用它们。我将如何完成这项工作? – ariel

+0

你可以使用添加和删除类来完成工作。另外我还没有在任何地方使用php代码。检查更新的小提琴 –

+0

好吧,让我工作。如果我有一个按钮ID,我可以使用按钮#编号吧? – ariel

1

我会通过捕捉点击功能,然后加载一些完成这个任务数据通过从服务器请求数据到div中。

$('button').on('click', function(){ 
    $.ajax({ 
     type: 'GET', //default anyway 
     url: '/path/to/my/controller.ext', 
     data: {'getImages' : true}, 
     success: function(data){ 
      $('.box').html(data); 
     } 
    }); 
}); 

然后在服务器端,我们可以捕获获取请求并返回一串图片;这个例子是在PHP中。

if(isset($_GET['getImages']) && TRUE === $_GET['getImages']): 
    //build some string to pass images.. 
    $str = '<img src="path/to/my/first_img.ext"/><img src="path/to/my/second_img.ext"/><img src="path/to/my/third_img.ext"/><img src="path/to/my/fourth_img.ext"/><img src="path/to/my/fifth_img.ext"/>'; 
    echo $str; 
endif; 

如果请求在我们.ajax()电话提供的文件名会发生,那么它将使用GET请求抢图像。我们有条件检查getImages的存在和价值。我们在其中创建一个带有图像的字符串,并将其传回。我们的ajax()调用的success:function(data)处理返回的数据。在这个例子中。数据是我们在php conditional中所做的$str。我们只是将该框的HTML更改为我们从服务器提供的字符串。

0

我上传一个例子与动画改变背景颜色:

http://jsfiddle.net/TBvcW/1/

它使用CSS3做,但谁的浏览器不支持它会改变没有动画的颜色。对于色彩的动画的关键代码是这些CSS属性:

-webkit-transition: background-color 0.5s, color 0.5s; 
-mox-transition: background-color 0.5s, color 0.5s; 
-o-transition: background-color 0.5s, color 0.5s; 
transition: background-color 0.5s, color 0.5s; 

哪里,我们决定改变时(通过CSS),该属性将被动画,多少时间动画会抓住。

你甚至可以改变框的高度,并添加图像在其他的答案中描述:

http://jsfiddle.net/TBvcW/2/

干杯。