7

am using this code to get menu tab.when i mouseover on the tab the tab image will change, similarly i want to change the image of tab onlick using jquery.i used the below code to do this but i was not able to get it.how can i do this.

<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>
Improve this question
0

3 Answers 3

Reset to default
15

You need to use background-image instead of backgroundImage. For example: 

$(function() {
  $('.home').click(function() {
    $(this).css('background-image', 'url(images/tabs3.png)');
  });
}):
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This will not work you need to give '.' before home if you want to select that element
3

I think this should be:

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

and remove this:

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

You have to make sure you have a correct path to your image.

Improve this answer

1 Comment

+1 for additional suggestions :)
-2

Use your jquery like this

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

5 Comments

This is incorrect and inefficient
@TheEnvironmentalist How could you say this answer is inefficient. Do you have any examples or explain it briefly, I can learn it from you. It works fine. Did you try this, How you say this is incorrect??
You are using old, arguably deprecated notation. Look at sandeep's example. The css method should involve arguments separated by commas, rather than the actual CSS format, as it is an internal function with styles as arguments, rather than an insertion of an entire line of CSS. The brackets shouldn't be necessary, and clutter the code. The input is appreciated, but the example is a little messy. That is why it is inefficient. The appearance of being deprecated makes it incorrect. Just because it works, doesn't mean it's correct. There are conventions. I hope that clears it up.
@TheEnvironmentalist What would you do if add more than one css element at a time. I dont see any documentation that says using like this is deprecated. See the jquery documentation api.jquery.com/css in this you can find example using like this. Its just like passing a JSONObject argument to .css() function. Anyhow, If you see any documentation share with me, it might be helpful. I am not clear up saying like this share any example or documentation about using like this is deprecated.
Using set notation for a single item is inefficient and messy. I didn't say it didn't work, I said it was messy, though this method was commonplace a few years ago. It is no longer the 'best' or 'proper' way to do this. I.e., it is deprecated. It works, but it is messy and so shouldn't be suggested to others. Your input is appreciated, and your mistake is a very common one. Just because it works, doesn't mean it's correct.