在jquery中更改背景图像onclick

发布于 2024-12-03 21:52:53 字数 286 浏览 0 评论 0原文

好的，我有一个类似 http://jsfiddle.net/8vFEd/ 的片段。我使用背景图像而不是平面背景框。单击任何矩形时，单击的矩形需要将背景图像更改为（活动），其余图像更改为（暗淡）。单击第二个矩形后，它需要具有（活动的）背景图像，其余的为暗淡图像。基本上我只使用 2 个 jquery 背景图像，它们根据单击的内容更改背景位置。有人可以指导我如何完成此操作，

其中一个将处于活动状态，其余部分将在单击该特定矩形时变暗。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

念三年u 2024-12-10 21:52:53

我假设您想更改背景图像（相同的逻辑适用于背景颜色）。可以说，所有的矩形都有“语言”类。

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

回复收藏 0 原文

生生漫 2024-12-10 21:52:53

我不确定我完全理解你想要完成的任务，但你可以尝试使用这个：

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

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

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/

回复收藏 0 原文

不必在意 2024-12-10 21:52:53

我想对约瑟夫的帖子发表评论，但我还没有这个特权，所以嘿。

可能值得将 2pxsolid #fff 的默认边框（其中 #fff 是父级的背景）应用于所有链接，因此这只是更改颜色，这意味着点击链接时上下移动不会出现问题（正如您在他的小提琴中看到的那样）。

要添加/删除图像，

$(".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')" });
});

请从他的代码中快速轻松修复： http://jsfiddle.net/bwfFL/1 /

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 原文

~没有更多了~