切换图标显示

运用css层叠实现图标切换。html如下：

       <div class="rtoolbar">
                     <ul>
                        <li><a class="xj" href="#">新建</a></li>
                        <li><a class="dk" href="#">打开</a></li>
                       //编辑的lock和unlock切换，注意没有类bjunlock
                        <li><a class="bj" href="#">编辑</a></li>
                        <li><a class="ss" href="#">搜索</a></li>
                        <li><a class="dc" href="#">导出</a></li>
                        <li><a class="bz" href="#">帮助</a></li>
                    </ul>
                 </div>
                 <div class="st_tree">
                    <ul class="firmenu">
                        <li><span onclick="addnew(this)" class="add"><img src="../images/open_05.png" class="img-span"></span><span class="align-span">添加条目</span>
                        <ul class="secmenu">
                  <li><span onclick="addli1(this)" class="add" ><img src="../images/open_07.png"></span><a href="#">中国建设银行</a>
                    <ul></ul>
                  </li>
                  <li><span onclick="addli1(this)" class="add" ><img src="../images/open_07.png"></span><a href="#">中国工商银行</a>
                    <ul></ul>
                  </li>
                  <li><span onclick="addli1(this)" class="add" ><img src="../images/open_07.png"></span><a href="#">中国招商银行</a>
                    <ul></ul>
                  </li>
                </ul>
                        </li>
                    </ul>
                </div>

css中把bjunlock类放bj类下面，用js动态添加删除bjunlock类来覆盖bj类。css如下:

.bj{background: url(../../images/blue_07.png) no-repeat center center}
.bjunlock{background: url(../../images/blue_06.png) no-repeat center center}

js如下：

       var bj = $('.bj');
       var addicon = $('.add');
       $(addicon).hide();
       $(bj).click(function(){
       $(addicon).toggle();
       $(this).toggleClass('bjunlock');//实现切换效果的js
   });