点击切换图片的底部导航

点击切换图片的底部导航

随着H5的兴起，APP风格的页面成了切页面的日常，写底部导航时，在网上找的没有找到合适的，就自己试着用jQuery实现了一下，希望能有帮助

UI给的切图是这样的，不得不说，很贴心，哈哈哈哈。

---

实现结果是这样的：

三个tab是一样的，所以这里可以用事件代理，点击事件的添加，有关事件代理的详细信息看这里：https://www.cnblogs.com/liugang-vip/p/5616484.html。
大致思路是每次触发点击事件的时候，把所有的tab图片换成未触发状态，然后把当前点击的节点图片替换成触发状态，点击事件结束。
但是怎么替换图片呢？
：这里我们可以看一下图片一，如果把触发状态图片和未触发状态图片的名字，取相同的地方和不同的地方划分成两部分，图片是根据路径及图片名字显示的，通过修改图片后一部分的内容，也就实现了图片的切换。那么我们是不是可以通过修改路径名，来实现图片的替换？当然是可以的，因为我试过了，哈哈哈哈哈哈哈
下面是实现代码(用了jQuery，所以一定记得添加到文件里或者引入<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>)：
JS代码：

$('#bottom').click(function(event) {
   
                if(event.target.tagName === 'IMG'){
                var nodes = $('#bottom li img');
                for(var i=0; i<nodes.length; i++){
                    nodes[i].src = nodes[i].src.replace(/.png|_selected.png/,'.png');
                }
                event.target.src = event.target.src.replace(/.png|_selected.png/,'_selected.png');
            }}