CODEWITHSUNDEEP
javascriptjqueryhtml
user892134
user892134

Reputation: 3224

addClass not working?

Why isn't addClass working? On click of a div with class step the div background and font color should change but nothing is happening.

    <html>
    <head><style type="text/css">
    .currentstep {
    background-color:#eeb345; padding:5px; color:#000000; font-size:14px; font-family:Arial;
    }
    #stepcontainer {
    overflow:hidden; width:100%; 
    }
    .step {
    float:right; width:auto; margin-right:2px; background-color:#59758d; padding:5px; color:#FFFFFF; font-size:14px; font-family:Arial; cursor:pointer;
    }
    </style>
    <script type="text/javascript">
$(function(){

    $('.step').live('click',function() {

    $(this).addClass('currentstep');
    $(this).siblings('.step').removeClass('currentstep');

    });
});
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
     <div id='stepcontainer'><div id='reset'><a>Reset</a></div>
    <div class='step'>Step 3</div><div class='step'>Step 2</div><div class='step'>Step 1</div></div>
    </body></html>

Upvotes: 0

Views: 2364

Answers (1)

Thomas Kelley
Thomas Kelley

Reputation: 10292

You are applying both .step and .currentstep to the same div (I'm assuming that you don't want to remove .step from the div). The background-color from .step is first, so that's the color that sticks.

Try changing the CSS definition for .currentstep to:

.currentstep
{
    background-color:#eeb345 !important;
    padding:5px;
    color:#000000;
    font-size:14px;
    font-family:Arial;
}

Here it is working properly: http://jsfiddle.net/tomtheman5/j6f6w/

Upvotes: 2

Related Questions