jQuery案例（底部导航图片切换）

作为一个代码新手，最近我又学习了一些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

转载于:https://www.cnblogs.com/liujiajiablog/p/9026297.html

jQuery案例（底部导航图片切换）相关推荐

Android底部导航栏切换页面填坑
** Android底部导航栏切换页面填坑 ** 这个效果的实现关键点就是给选项赋予两种状态,focused和normal,在主程序中用监听判断是否被选中,就给被选中的选项设focused为true, ...
Android中的底部导航栏切换TabContainerView
前言:在GitHub上看到一个框架,实现底部导航栏切换,感觉不错,就在这里总结一下. 参考:https://www.jianshu.com/p/9aaff43bbf9f https://github. ...
隐藏导航条HTML,jQuery实现的导航条切换可显示隐藏
用jQuery实现一些导航条切换,显示隐藏,主要运用的技术有slideToggle( ),toggeClass( ),toggle( ): 代码如下: 导航条在项目中的应用 $(function(){ ...
用jQuery实现一些导航条切换，显示隐藏
用jQuery实现一些导航条切换,显示隐藏,主要运用的技术有slideToggle( ),toggeClass( ),toggle( ): 源码下载地址代码如下: <!DOCTYPE html ...
jquery实现点击图片切换为另一图片,再次点击恢复到原图片
在项目里,有时候会写这样的开关效果,点击开关来回切换,也就是jquery实现点击图片切换为另一图片,再次点击恢复到原图片. 下面是一个小的demo示例: <!DOCTYPE html> & ...
Vue实现底部导航栏切换页面及图片
前言刚进新公司,有幸接触到从前后端不分离到前后端分离的一个过程,最开始对vue不太熟悉,下班自学一周就开始做了,可能会有很多问题,若有写不好的地方大佬们可以提出. 一.实现效果需求:vue底部导航 ...
BottomNavigationView+Navigation 添加底部导航菜单切换时的fragment过渡动画animation
Navigation默认的透明度动画,只有300毫秒,通过BottomNavigationView切换fragment时,几乎看不到过渡动画的效果,开始还以为没有动画. 开始在网上查找相关资料,最后找 ...
利用FrameLayout+LinearLayout实现Android底部导航栏切换
实现底部导航栏的方式有很多种,此处我只是采用了其中一种,其余的方法可自行百度去查询. 效果图展示一.布局文件内容 <?xml version="1.0" encoding= ...
安卓开发底部导航图标切换时动画效果_体验安卓 10：好用百倍都不止！
十万人测评俱乐部 Q群:737976088 资源置换合作请加VX:15216685489 谷歌正式发布了 Android 10,这是安卓的第十个大版本更新. 雷科技(微信:leitech)在第一时间将 ...

jQuery案例（底部导航图片切换）

jQuery案例（底部导航图片切换）相关推荐

最新文章

热门文章