CODEWITHSUNDEEP
jqueryclick
Claudio Cisneros
Claudio Cisneros

Reputation: 23

Modify css using jquery

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

Upvotes: 1

Views: 148

Answers (3)

Owlvark
Owlvark

Reputation: 1803

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
        }
    });
});

Upvotes: 0

stefanz
stefanz

Reputation: 1326

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

Upvotes: 0

Zoltan Toth
Zoltan Toth

Reputation: 47667

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.

Upvotes: 5

Related Questions