Modify css using jquery

Question

How do I change a css property using jquery in the following example?. What I need to do is to change the background position of the "btn1" class when the user click that item. I'm not able to target the "btn1" class with the "click" function...not an expert by the way

<div class="menu">
    <ul>
        <li><a href="#" onclick="loadListaClientes(1);loadClientWeb(1);loadSlideWeb(1);return false;" class="btn1"></a>
        <li><a href="#" onclick="loadListaClientes(2);loadClientGr(1);return false;" class="btn2"></a></li>
        <li><a href="#" onclick="loadListaClientes(3);loadClientAds(1);return false;" class="btn3"></a></li>
        <li><a href="#" onclick="loadListaClientes(4);loadClientPh(1);return false;" class="btn4"></a></li>
        <li><a href="#" onclick="loadListaClientes(5);loadClientMo(1);return false;" class="btn5"></a></li>
        <li><a href="#" onclick="loadListaClientes(6);loadClientApp(1);return false;" class="btn6"></a></li>
       <li><a href="#" onclick="loadListaClientes(7);loadClientId(1);return false;" class="btn7"></a></li>
    </ul>
</div>

ps: I update the markup

Why are you using inline onclick when you're using jQuery (with a (rather awesome) click-handling method)? Oh, and your HTML is horribly invalid, the only valid child of ul or ol is an li element. Wrap the a inside of an li. — David Thomas
– David Thomas, Commented Dec 26, 2012 at 15:45
If you mention what the different background positions are for each button, I will update my answer to show them. — Owlvark
– Owlvark, Commented Dec 26, 2012 at 18:17
Actually I found that "css('background-position', 'bottom') will work for any size. I'm having a problem now cause it works in the fiddle but it doesn't in my source files — Claudio Cisneros
– Claudio Cisneros, Commented Dec 26, 2012 at 19:21
Ok, fair enough. I do recommend using delegation rather than a click handler for each menu item, though. — Owlvark
– Owlvark, Commented Dec 26, 2012 at 19:28

Zoltan Toth · Accepted Answer · 2012-12-26 15:44:37Z

5

Try it like this

$("a.btn1").on("click", function() {
    $(this).css('background-position', 'new_values_here');
});

Also if you're using a list <ul> you better use its' items <li>.. Otherwise it makes no semantic sense.

answered Dec 26, 2012 at 15:44

Zoltan Toth

47.8k12 gold badges132 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Claudio Cisneros Over a year ago

I've added this: $("a.btn1").on("click", function() { $(this).css('background-position', '-20'); }); And add the li tag as you said, but still not working...Do I miss something?

Claudio Cisneros Over a year ago

I guess I need to add some fuctionality in order to reset the background position of all others links (btn2, btn3, etc), right?.

Claudio Cisneros Over a year ago

There's something I don't understand yet: I have a class (btn1, btn2, etc) for each link with a background image and all images are different sizes, so I need to change the background position indivudaly. In the CSS of the jsfiddle you have styled the <a> insted the <btn1>, maybe that's the reason it won't work for me?.

Zoltan Toth Over a year ago

I used a just for shortness because it's the only link in my jsfiddle example, but you're free to use .btn1 - jsfiddle.net/dQZ7r/1

Claudio Cisneros Over a year ago

Still not working :( HTML <div class="menu"> <ul> <li><a href="#" onclick="loadListaClientes(1);loadClientWeb(1);loadSlideWeb(1);return false;" class="btn1"></a></li></ul></div> SCRIPT $("a.btn1").on("click", function(e) { e.preventDefault(); $(this).css('background-position', 'bottom'); }); CSS .btn1{ background:url(../images/btn_web.jpg) no-repeat scroll 0 0 ; width:50px; height:28px; float:left; margin-left:90px; }

|

stefanz · Accepted Answer · 2012-12-26 16:39:44Z

0

I did some modifies to your code and now it looks like this

For making this wokring you should load jQuery in your project. I guess this is a good start

answered Dec 26, 2012 at 16:39

stefanz

1,32713 silver badges23 bronze badges

Comments

Owlvark · Accepted Answer · 2012-12-26 17:43:26Z

Simplify the HTML:

<ul class="menu">
    <li><a href="#" class="btn1"></a></li>
    <li><a href="#" class="btn2"></a></li>
    <li><a href="#" class="btn3"></a></li>
    <li><a href="#" class="btn4"></a></li>
    <li><a href="#" class="btn5"></a></li>
    <li><a href="#" class="btn6"></a></li>
    <li><a href="#" class="btn7"></a></li>
</ul>

Add one click handler using delegation:

$(document).ready(function() { // wait for DOM load
    // handle click on menu
    $(".menu").on("click", "a", function(ev) { // delegate to menu div
        ev.preventDefault(); // similar to "return false"
        var button = $(this); // the "a" that was clicked
        var itemIndex = $(button.parent(), ".menu").index() + 1; // calculate element number
        loadListaClientes(itemIndex); // first function can be called using index
        // handle buttons case by case
        switch (itemIndex) {
        case 1:
            // ".btn1" handled here
            button.css('background-position', newPosition); // change background CSS
            loadClientWeb(1);
            loadSlideWeb(1)
            break;
        case 2:
            // ".btn2", etc.
            loadClientGr(1);
            break;
        case 3:
            loadClientAds(1);
            break;
        case 4:
            loadClientPh(1);
            break;
        case 5:
            loadClientMo(1);
            break;
        case 6:
            loadClientApp(1);
            break;
        case 7:
            loadClientId(1);
            break;
        default:
            // default menu action or throw error here
        }
    });
});

Collectives™ on Stack Overflow

Modify css using jquery

3 Answers 3

11 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related