实现网页底部菜单图标点击切换效果

实现网页底部菜单图标点击切换效果

首先我们将准备好的图片，放入工程目录中，如图所示，在这里，定义了如下四个图标，在后面加上_hover的就是点击后需要切换的图标
思路：用户点击某图标时将该图标的路径后面加上_hover,将未点击的图标去掉_hover，即可完成效果。

做法一：js切换
html代码如下：

再上js代码：
//加上点击事件

$('.btn-menu').click(
			function(event) {
			    if(event.target.tagName === 'IMG'){
			    var nodes = $('.btn-menu img');
			    for(var i=0; i<nodes.length; i++){
			        nodes[i].src = nodes[i].src.replace('_hover.png','.png');
			    }
			    event.target.src = event.target.src.replace('.png','_hover.png');
			    }
			}
		)

做完后可实现点击切换图标的效果，基本算完成了，但是会有一个小问题，如果图标带上链接的话，那么点击图标之后页面就会跳转，跳转之后的页面又会刷新会造成图标复原的情况。这又该如何解决呢。

在这里推荐使用URI判断的方式解决，啥也不说了，先端上代码吧

//定义图标原路径
String[] imgPaths = new String[4];
    imgPaths[0] = "bottom-nav-ico-home";
    imgPaths[1] = "bottom-nav-ico-all";
    imgPaths[2] = "bottom-nav-ico-cart";
    imgPaths[3] = "bottom-nav-ico-user";
//获取到页面URI
    String clickedUri  = request.getRequestURI();
    //先打印出来看看叭
    System.out.println(clickedUri);
    //简单来讲，如果跳到这个链接的话，就把对应的图标路径改变，以此类推...
    if(clickedUri.indexOf("/WEB-INF/view//wechat/sundry/index.jsp") >= 0){
        imgPaths[0] += "_hover";
    }
    if(clickedUri.indexOf("/WEB-INF/view//wechat/sundry/sundry_list.jsp") >= 0){
        imgPaths[1] += "_hover";
    }
    if(clickedUri.indexOf("/WEB-INF/view//wechat/sundry/shop_cart.jsp") >= 0){
        imgPaths[2] += "_hover";
    }
    if(clickedUri.indexOf("/WEB-INF/view//wechat/center/index.jsp") >= 0) {
        imgPaths[3] += "_hover";
    }
    for (int i = 0; i < imgPaths.length; i++){
        imgPaths[i] += ".png";
    }

你没看错，这是写在jsp页面的java脚本，虽然写法奇葩点，但是有用就是王道啦...

最后来看看效果吧