Home/ Questions/Q 6882059
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T05:12:24+00:00

Why isn’t addClass working? On click of a div with class step the div

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0