zoukankan      html  css  js  c++  java
  • 信息化系统导航菜单样式实现

    版权声明:本文为博主原创文章。未经博主同意不得转载。

    https://blog.csdn.net/java_myheart/article/details/37695455

    实现的菜单效果:
    

    选中的是绿色的菜单。其余为灰色的。

    实现方法:详细菜单使用图片取代。不採用文字和css组合实现。

    主要JS代码:

    点击菜单的时候。先遍历移除已有的选中菜单样式,然后再加入新的菜单相应样式

     changeC(id,img);
     var index=img.indexOf(".");
     var imgPath='<%=basePath %>images/menu/'+img.substring(0,index)+'w.png';

     document.getElementById(id).src=imgPath;

    遍历移除已有菜单样式

        function changeC(id,img){
         for(var i=0;i<jQuery("img").length;i++){     
          if(id!=jQuery("img")[i].id){
              var path=jQuery("img")[i].src;
              if(path.indexOf("w")>0){
                      var index=path.indexOf("w");
                       path=path.substring(0,index)+".png";
                       document.getElementById(jQuery("img")[i].id).src=path;
              }
           }
          }
        }

    登陆后默认选中第一项菜单

        $(document).ready(function(){
         if($('.topmenu').size()>0){
           var id=$('.topmenu')[0].id;
           var img=$('.topmenu')[0].src;
           var index=img.indexOf(".");
            var imgPath=img.substring(0,index)+'w.png';
              document.getElementById(id).src=imgPath;
         }
        })

查看全文
  • 相关阅读:
    hdu1686 最大匹配次数 KMP
    洛谷 P5057 [CQOI2006]简单题(树状数组)
    洛谷 P5020 货币系统
    洛谷 P5019 铺设道路(差分)
    洛谷 P1119 灾后重建(Floyd)
    洛谷 P1082 同余方程(同余&&exgcd)
    洛谷 P2384 最短路
    洛谷 P3371 【模板】单源最短路径(弱化版) && dijkstra模板
    洛谷 P1387 最大正方形
    洛谷 P2866 [USACO06NOV]糟糕的一天Bad Hair Day
  • 原文地址:https://www.cnblogs.com/ldxsuanfa/p/10779603.html
  • Copyright © 2011-2022 走看看