7

我正在使用此代码获取菜单选项卡。当我将鼠标悬停在选项卡上时，选项卡图像会改变，同样我想使用 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>
4

3 回答 3

15

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

$(function() {
  $('.home').click(function() {
    $(this).css('background-image', 'url(images/tabs3.png)');
  });
}):
于 2013-01-31T05:49:27.757 回答
3

我认为这应该是：

$('.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.

于 2013-01-31T05:51:08.050 回答
-2

像这样使用你的jquery

$('.home').css({'background-image':'url(images/tabs3.png)'});
于 2013-01-31T05:49:33.160 回答