开发者

change background images onclick in jquery

Ok, I have a snippet like http://jsfiddle.net/8vFEd/. I am using background images rather than plane background boxes. On click of any rectangle the clicked rectangle needs to change the background image say(active) and the rest as (dim). Once a second rectangle is clicked it needs to have (active) bacground image and the rest the dim image. Basically I am using only 2 jquery backgroung images, and they change background positions depending on what is clicked. can someone guide how do i accomplish开发者_开发百科 this

One will be active ad the rest will be dim on click of that particular rectangle.


I am assuming that you want to change the background images (same logic applies for background color). Lets say, all your rectangles have class "language".

$(".language").click(function () {
   // Dim out all the rectangles
   $(".language").css("background-image", "url(/dim.jpg)");

   // Make currently clicked rectangle active
   $(this).css("background-image", "url(/active.jpg)");
});


I'm not sure I fully understand what you're trying to accomplish, but you might try using this:

$(this).css("border","2px solid red")
       .parent().siblings().find('a')
       .css('border', 0);

http://jsfiddle.net/8vFEd/23/


I'd comment this onto Joseph's post but I don't have that privilege yet, so hey.

It's probably worth applying a default border of 2px solid #fff (where #fff is the background of the parent) to all the links, so it's just a case of changing the colour, which means there'll be no problems with links moving up and down as they get clicked (as you can see in his Fiddle).

For adding/removing the images,

$(".prop a").click(function() {
    // Give this the green background image
    $(this).css({ "border-color": "#f00", "background-image": "url('http://colourlovers.com.s3.amazonaws.com/images/patterns/113/113140.png')" })
    .parent().siblings().find('a')
    // Give all the others the red background image
    .css({ 'border-color': '#fff', 'background-image': "url('http://colourlovers.com.s3.amazonaws.com/images/patterns/155/155260.png')" });
});

Quick easy fix, from his code: http://jsfiddle.net/bwfFL/1/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜