运用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 });
原文:http://www.cnblogs.com/jxb520wan/p/4860514.html