作为一个代码新手，最近我又学习了一些jQuery的相关知识，所以今天就做了一个小案例。如下：
通过点击图标切换并点亮图标，现在我们就开始做吧 ,首先说一下思路：
我是通过事件委托的方式做的，大致思路就是把所有的图片变成未选中的状态，然后点击图片触发状态，点击事件结束。
就是通过修改路径名实现图片的替换，取相同的地方和不同的地方划分成两部分，图片是根据路径及图片名字显示的，
通过修改图片后一部分的内容，也就实现了图片的切换。
一，现做一个简单的布局，这个就不细说了
<ul ?id="bottom"> ?????<li class="activeClass" index="1"> ??????????<img src="img/nav_init_1.jpg"> ??????????<span>首页</span> ?????</li> ?????<li index="2"> ?????????<img src="img/nav_init_2.jpg"> ?????????<span>金融</span> ?????</li> ?????<li index="3"> ?????????<img src="img/nav_init_3.jpg"> ?????????<span>生活</span> ?????</li> ?????<li index="4"> ?????????<img src="img/nav_init_4.jpg"> ?????????<span>健康</span> ?????</li> ?????<li index="5"> ??????????<img src="img/nav_init_5.jpg"> ??????????<span>我的</span> ?????</li> </ul>
二，接着开始实现jq功能（前提：要引入jq文件）
这个分为两步：
第一步：把全部路径图片变成灰色
第二步：帮当前点击的图标点亮
$(‘ul‘).on("click","li",function(event){ ??????????//事件委托 ???????????????var preindex=$("li.activeClass").attr("index"); ??????????// console.log(preindex); ?????????//字体变颜色 ??$(this).addClass("activeClass").siblings().removeClass("activeClass"); ??????????if(event.target.tagName === ‘IMG‘){ ???????????????var nodes = $(‘#bottom li img‘); ???????????????// console.log(nodes); ???????????????for(var i=0; i<nodes.length; i++){ ?????????????????//把所有的路径全部变成未选中的图标 ???????????????????nodes[i].src = nodes[i].src.replace(/.jpg|_selected.jpg/,‘.jpg‘); ???????????????} ???????????????event.target.src = event.target.src.replace(/.jpg|_selected.jpg/,‘_selected.jpg‘); ???????????}} ???)三：最终实现效果
-- -- END
jQuery案例（底部导航图片切换）
原文地址：https://www.cnblogs.com/liujiajiablog/p/9026297.html