Question

为什么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>

Answer 1

您正在将.step和.currentstep同时应用于同一个div（我假设您不想从div中删除.step）。来自background-color的{{1}}是第一个，所以这就是坚持的颜色。

尝试将.step的CSS定义更改为：

.currentstep

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

addClass不工作？

1 个答案: