jquery onclick更改css背景图像[重复]答案

【问题标题】：jquery onclick change css background image [duplicate]jquery onclick更改css背景图像[重复]
【发布时间】：2013-01-15 04:04:30
【问题描述】：

我正在使用此代码获取菜单选项卡。当我将鼠标悬停在选项卡上时，选项卡图像会改变，同样我想使用 jquery 更改选项卡 onlick 的图像。我使用下面的代码来执行此操作，但我无法得到它。我该怎么做。

<html>
    <head>
    <title>Css Menu</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <style>
    .home {
        background: url("images/tab2.png") repeat scroll 0 0 transparent;
        border-radius: 4px 4px 0 0;
        height: 75px;
        left: 54px;
        position: relative;
        top: 25px;
        width: 90px;
    } 
    .home:hover {
        background: url("images/tab3.png") repeat scroll 0 0 transparent;
        border-top: 1px solid black;
        border-left: 1px solid black;
        border-right: 1px solid black;
    }


    </style>
    <script type="text/javascript">
        $(function() {
              $('.home').click(function() {
                    $('home').css('backgroundImage', 'url(images/tabs3.png)');
              });
        }):
    </script>

    </head>
    <body><div class="frame">
    <div class="header1"></div>
    <div class="header2">
        <a href="#"><div class="home" onclick="function()"><img src="images/tools.png" class="image"><br><span class="align">Home</span></div></a>
        </div>
    <div class="header3"></div>
    </div>
    </body>
    </html>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您需要使用 background-image 而不是 backgroundImage。例如：

$(function() {
  $('.home').click(function() {
    $(this).css('background-image', 'url(images/tabs3.png)');
  });
}):

【讨论】：

这行不通，你需要给 '.'如果要选择该元素，请在 home 之前
@PaulRadich 感谢您更新我 :)

【解决方案2】：

我认为应该是：

$('.home').click(function() {
     $(this).css('background', 'url(images/tabs3.png)');
 });

并删除它：

<div class="home" onclick="function()">
     //-----------^^^^^^^^^^^^^^^^^^^^---------no need for this

你必须make sure you have a correct path to your image.

【讨论】：

+1 获取更多建议 :)
@Zenph 谢谢 V.much。 :)

【解决方案3】：

像这样使用你的 jquery

$('.home').css({'background-image':'url(images/tabs3.png)'});

【讨论】：

这是不正确且低效的
@TheEnvironmentalist 你怎么能说这个答案效率低下。你有什么例子或者简单解释一下，我可以向你学习。它工作正常。你试过这个，你怎么说这是不正确的？？
您使用的是旧的，可以说是不推荐使用的符号。看看桑迪普的例子。 css 方法应该包含以逗号分隔的参数，而不是实际的 CSS 格式，因为它是一个以样式作为参数的内部函数，而不是插入整行 CSS。括号不应该是必需的，并且会使代码混乱。感谢您的输入，但示例有点混乱。这就是它效率低下的原因。被弃用的外观使其不正确。仅仅因为它有效，并不意味着它是正确的。有约定。我希望这能解决问题。
@TheEnvironmentalist 如果一次添加多个 CSS 元素，你会怎么做。我没有看到任何说明使用这样的文档已被弃用。请参阅 jquery 文档api.jquery.com/css 在此您可以找到使用这样的示例。就像将 JSONObject 参数传递给 .css() 函数一样。无论如何，如果您看到与我分享的任何文档，它可能会有所帮助。我不清楚是否像这样分享任何关于使用这样的示例或文档已被弃用。
对单个项目使用集合表示法效率低下且混乱。我没有说它不起作用，我说它很乱，尽管这种方法在几年前是司空见惯的。它不再是执行此操作的“最佳”或“正确”方式。即，它已弃用。它有效，但它很混乱，因此不应该向其他人建议。感谢您的意见，您的错误是一个非常常见的错误。 仅仅因为它有效，并不意味着它是正确的。