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/
精彩评论