addClass not working?

addClass not working?

本文关键字：working not addClass      更新时间：2023-09-26

为什么addClass不能工作?当点击step类的div时，div的背景和字体颜色应该改变，但是什么都没有发生。

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

您将.step和.currentstep应用于相同的div(我假设您不想从div中删除.step)。来自.step的background-color是第一个，所以这是固定的颜色。

尝试更改.currentstep的CSS定义为:

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

这里工作正常:http://jsfiddle.net/tomtheman5/j6f6w/

相关文章：