首页 > 其他 > 详细

切换图标显示

时间:2015-10-08 12:55:49      阅读:265      评论:0      收藏:0      [点我收藏+]

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!